html+css實例

時間 2019-11-20

標籤 html+css html css 實例欄目 CSS 简体版

原文原文鏈接

手機適配問題:一個圖片比較大或者比較小，怎麼適配手機怎麼優化?css

https://blog.csdn.net/rj_jqd/article/details/8651251html

一個p標籤，不換行，超出部分顯示爲省略號？css3

p{api

overflow:hidden;佈局

white-space:nowrap;post

text-overflow:ellipsis;字體

}flex

如何找到全部 HTML select 標籤的選中項？優化

$('[name=selectname] :selected')flexbox

css實現字體大寫？

<html>

<head>

p.uppercase {text-transform: uppercase};//大寫

p.lowercase {text-transform: lowercase};//小寫

p.capitalize {text-transform: capitalize};//首字母大寫

</style>

</head>

<body>

<p class="uppercase">This is some text in a paragraph.</p >

<p class="lowercase">This is some text in a paragraph.</p >

<p class="capitalize">This is some text in a paragraph.</p >

</body>

</html>

用一個div模擬textarea的實現

純css畫三角形?

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242

一個背景圖的線性漸變?

.box {

width: 100px;

height: 100px;

background-image: linear-gradient(to right, red, blue);

}

一個滿屏品字佈局如何設計?

第一種真正的品字：

三塊高寬是肯定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。

第二種全屏的品字佈局: 上面的div設置成100%，下面的div分別寬50%，而後使用float或者inline使其不換行。

聖盃佈局和雙飛翼佈局？

https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542

如何讓一個不定寬高的盒子水平垂直居中？

定位的方式

.father {

position: relative;

}

.son {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

css3屬性

.father {

position: relative;

}

.son {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

flex佈局

.father {

display: flex;

justify-content: center;

align-items: center;

}

讓大div裏面的小div水平垂直都居中

</div>

①相對/絕對定位法

.parent{

position:relative;

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

postion: absolute;

top: 50%;

left: 50%;

width:100px;

height: 100px;

margin-top: -50px;

margin-left: -50px;

border: 1px solid violet;

}

注意點：使用定位方法,須要知道子元素的寬高,可是不須要知道父元素的寬高.

②利用定位及margin:auto實現

.parent{

position:relative;

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

position: absolute;

top: 0;

left: 0;

right: 0;

botton: 0;

/*width:100px;

height: 100px;*/

margin: auto;

border: 1px solid violet;

}

實現原理：設置margin自動適應,而後設置定位的上下左右都爲0,就如四邊均衡受力從而實現盒子的居中;

優勢：可不用知道子div的高寬

③使用dosplay:table-cell

.parent{

display: table-cell;

width: 300px;

height: 200px;

border: 1px solid red;

vertical-align: middle;

text-align: center;

}

.child{

width: 100px;

heiht: 100px;

border: 1px solid violet;

}

實現原理：display:table-cell屬性指讓標籤元素以表格單元格的形式呈現，相似於td標籤.

組合使用vertical-align,text-align,可使父元素內的全部行內元素水平垂直居中（也就是將內部的元素設置display:inline-block）

④使用彈性佈局display:flex

.parent{

display: flex;

width: 300px;

height: 300px;

border: 1px solid red;

justify-content: center;

align-items: center;

}

.child{

width: 100px;

height: 100px;

border: 1px solid violet;

}

⑤計算四周的間距設置子元素與父元素之間的margin-top和margin-left;

.parent{

width: 300px;

height: 200px;

border: 1px solid red;

}

.child{

width: 100px;

height: 100px;

margin-top: 50px;

margin-left: 100px;

}

三欄佈局：假設高度已知，其中左欄、右欄寬度各位300px，中間自適應？
<style type=」text/css」>
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
①浮動方法
<section class=」layout float」>
<article class=」left-right-center」>
<div class=」left」></div>
<div class=」right」></div>
<div class=」center」>
<h1>浮動解決方案</h1>
這是三欄佈局中間部分
</div>
</ article >
</section>
<style type=」text/css」>
.layout.foat .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yelleow;
}
</style>
②絕對定位方法
<section class=」layout absolute」>
<article class=」left-center-right」>
<div class=」left」></div>
<div class=」center」>
<h1>絕對定位解決方案</h1>
這是三欄佈局中間部分
</div>
<div class=」right」></div>
</ article >
</section>
<style type=」text/css」>
.layout.absolute .left-center-right{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
③flex佈局方法
<section class=」layout flexbox」>
<article class=」left-center-right」>
<div class=」left」></div>
<div class=」center」>
<h1>flex佈局解決方案</h1>
這是三欄佈局中間部分
</div>
<div class=」right」></div>
</ article >
</section>
<style type=」text/css」>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.leftbox .left{
width: 300px;
background: red;
}
.layout.felxbox .cneter{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
④表格佈局方法
<section class=」layout table」>
<article class=」left-center-right」>
<div class=」left」></div>
<div class=」center」>
<h1>表格佈局解決方案</h1>
這是三欄佈局中間部分
</div>
<div class=」right」></div>
</ article >
</section>
<style type=」text/css」>
.layout.table .left-center-right{
display: table;
width: 100%;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
widht: 300px;
backgorund: blue;
}
</style>
⑤網格佈局方法
<section class=」layout grid」>
<article class=」left-center-right」>
<div class=」left」></div>
<div class=」center」>
<h1>網格佈局解決方案</h1>
這是三欄佈局中間部分
</div>
<div class=」right」></div>
</ article >
</section>
<style type=」text/css」>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
每一個佈局方案的優缺點：
浮動佈局：缺點：脫離文檔流（須要清楚浮動以及處理好浮動周邊的關係）；
優勢：兼容性較好
絕對定位：缺點：佈局脫離文檔流，使得其子元素也必須脫離文檔流，致使其有效性和可用性比較差；
優勢：快捷，配合JS使用很是快也不容易出問題
flex佈局： CSS3主要解決上述兩種佈局的缺點，比較完美，用於移動端；
表格佈局：缺點：當其中一個單元格高度超出的時，其餘高度也會變化；
優勢：方便，兼容性好
網格佈局：新技術，使佈局再也不是模擬網格佈局，能夠作不少複雜的事情但代碼量能減小不少
補充：若是中間內容高於容器高度，flex和table佈局可用

擴展：三欄佈局
左右寬度固定，中間自適應
上下高度固定，中間自適應
兩欄佈局
左寬度固定，右自適應
右寬度固定，左自適應
上高度固定，下自適應
下高度固定，上自適應

一個塊級元素的水平居中，你有哪幾種方式能夠實現？使用flex讓元素水平居中有作過嗎？①.子絕父相<style>.father{position:relative;width:400px;height:400px;background:blue;}.son{position:absolute;top:50%;left:50%;width:200px;height:200px;background:red;transform:translate(-50%,-50%);}</style></head><body><div class="father"><div class="son"></div></div></body>注意：外層div要設定高度和寬度缺點：當子元素寬高大小不是偶數時，移動50%以後，像素點並非整數，出了小數，和顯示像素沒有對上。會致使子元素內部字體邊緣模糊。transform:translate (-50%,-50%) 形成的文字邊緣模糊解決方案 https://www.aliyun.com/jiaocheng/639148.html②.父元素彈性佈局<!doctype html><html lang="en"><head><meta charset="UTF-8"><style type="text/css">.father {display: flex;width: 400px;height: 400px;background: red;justify-content: center;/*x軸對齊方式*/align-items: center;/*y軸對齊方式*/}.son {width: 200px;height: 200px;background: blue;}</style></head><body><div class="father"><div class="son"></div></div></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。