用兩種方法來實現乙個背景色為紅色、寬度為960px的
在瀏覽器中居中
實現思路為:一、利用設定左右margin為auto,自動居中;二、利用絕對定位和負邊距來居中
html主要**如下
class="div1">實現乙個背景色為紅色、寬度為960px的盒子在瀏覽器中居中利用margindiv>
class="div">
class="div2 margin">實現乙個背景色為紅色、寬度為960px的盒子在瀏覽器中居中利用絕對定位div>
div>
css主要**如下:
.div1
.div
.div2
.margin
有的圓角矩形是複雜圖案,無法直接用border-radius,請在不使用border-radius的情況下實現乙個可復用的高度和寬度都自適應的圓角矩形
是實現思路為,利用幾個高度為1px盒子的左右邊線來畫乙個圓角
html**如下:
class="div4">
class="top1">div>
class="top2">div>
class="top3">div>
class="top4">div>
class="top5">div>
class="main">
有的圓角矩形是複雜圖案,無法直接用border-radius,請在不使用border-radius的情況下實現乙個可復用的高度和寬度都自適應的圓角矩形
div>
class="bottom5">div>
class="bottom4">div>
class="bottom3">div>
class="bottom2">div>
class="bottom1">div>
div>
css**如下:
.div4
.top2, .bottom2, .top3, .bottom3, .top4, .bottom4, .top5, .bottom5
.top1, .bottom1
.top2, .bottom2
.top3, .bottom3
.top4, .bottom4
.top5, .bottom5
.main
用兩種不同的方法來實現乙個兩列布局,其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化
實現思路為:一、浮動和margin;二、相對布局
html**如下:
用兩種不同的方法來實現乙個兩列布局,其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化p>
第一種:基於float和marginp>
div>
class="div5">
class="diva">divadiv>
class="divb">divbdiv>
class="divc">divcdiv>
div>
用兩種不同的方法來實現乙個兩列布局,其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化p>
第二種:基於絕對定位p>
div>
class="div6">
class="diva1">divadiv>
class="divb1">divbdiv>
class="divc1">divcdiv>
div>css**如下:
.diva
.divb
.divc
.div6
.diva1
.divb1
.divc1
用兩種不同的方式來實現乙個三列布局,其中左側和右側的部分寬度固定,中間部分寬度隨瀏覽器寬度的變化而自適應變化
實現思路為:一、浮動和左右margin(注意盒子順序);二、浮動和負邊距實現
html**如下:
class="div7">
class="diva">div>
class="divc">div>
class="divb">div>
div>
class="div8">
class="diva1">div>
class="divb1">div>
class="divc1">div>
div>
css**如下:
.diva
.divb
.divc
.div8
.diva1
.divb1
.divc1
實現乙個浮動布局,紅色容器中每一行的藍色容器數量隨著瀏覽器寬度的變化而變化
html**如下:
class="clr">div>
class="div9">
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="flexbox">div>
class="clr">div>
div>
css**如下:
.div9
.flexbox
.clr
百度前端學院實踐記錄
value innnerhtml value是input框的輸入值 innerhtml是dom元素裡面的所有dom結構 keyvalue 13 為回車按鍵 js getfullyear 從data資料中提取年份 ceil 最大整數 floor最小整數 floor 是向負無窮大捨入,floor 10....
百度前端學院任務筆記(一)
1.心得 看完 head first html 與 css 就開始任務。結合任務二著手寫了個簡單的網頁簡歷。一開始認為應該會很easy,沒想到還真不怎麼順利。對元素的定位,字元間距,段落間距的掌握實在糟透了。2.知識點 1 垂直居中 給定元素寬度 可用 具體畫素大小 min width max wi...
百度前端學院學習心得
零基礎html編碼 零基礎html及css編碼 一 三欄式布局 定位和居中問題 待更新 前言 本文隨著我的學習進度在不斷更新維護中 建議使用來代替以實現加粗 可不僅限於加粗字型實現 強調 功能,且在殘障人士使用 閱讀 功能時會重讀。在表單中,建議使用來代替以實現表單提交 submit 支援鍵盤的 e...