百度web ife前端學院 task1學習筆記

2021-07-09 07:39:33 字數 3064 閱讀 6178

用兩種方法來實現乙個背景色為紅色、寬度為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...