目中有時候會遇到這個問題:一行有3個div,希望這3個div平分屏幕寬度,并且高度等于寬度。
第一個問題:平分屏幕寬度
可以對div設置百分比寬度,而不是直接用px寬度,這里用到了響應式設計的思想,可以參考這篇文章:自適應網頁設計(Responsive Web Design)
第二個問題:動態設置高度和寬度一致
有兩種方法,一種是用js動態設置,一種是直接用CSS設置
先看下html代碼
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
公用的CSS
ul,li{
list-style: none;
}
* {
margin: 0;
padding: 0;
outline: 0
}
body {
margin: 0;
padding: 0;
-webkit-appearance: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
}
ul{
margin:10px;
}
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
用js動態設置
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
用CSS設置
.dummy {
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background: #333333;
}
CSS設置padding-top的原理:Use CSS to Specify the Aspect Ratio of a Fluid Element
/———————————————————
然后嘗試對圖片設置高度等于動態寬度
js方法很簡單,跟上面的方法基本相同
<ul>
<li class="container">
<img src="images/test_1.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_2.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_3.jpg"/>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.container img{
width: 100%;
height:100%;
}
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
CSS方法
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.dummy{
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background:url(images/test_3.jpg) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
通過設置background可以實現。
div包含img的方法沒有試驗成功,以后繼續嘗試
/————————————-
還有一個問題,怎么設置div和img之間的padding,又能保證div寬度是屏幕寬度的三分之一?
TML ul li 橫排居中排列的方法,三步驟及實例
無序列表的列表項默認情況下是豎著排的,因為li元素是塊級元素,會自動分行。那如果要將列表的列表項進行橫排,比用無序列表ul元素定義一個導航條。那該怎么辦呢?這當中有三個應當被解決的東西,一個是橫排本身,另一個就是應當把無序列表項的圓點去掉,第三則是讓ul定義的列表居中顯示,包括水平居中和垂直居中。方法如下:
HTML ul li 橫排居中排列的方法,三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block,個人比較常用的是后者:
ul li{display:inline-block;}
水平居中方法:只要將ul元素包含于一個div元素,并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外,因為ul的列表默認情況下是有左內邊距的,所以,為了能夠讓列表能夠更好地水平居中,需要將ul的左內邊距padding-left設置為0,具體可見下方的綜合實例。
垂直居中方法:為包含ul元素的div元素設置寬度width和高度height(實際上導航條一般也需要有寬度和高度的設置),然后將ul的line-height屬性設置為父元素的高度height即可。
將ul元素的list-style屬性設置為none即可。
HTML ul li 橫排居中排列的方法,三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>
HTML ul li 橫排居中排列的方法,綜合實例在線 - HTML教程
如上代碼,一定要將ul的左內邊距padding-left設置為0,否則ul列表的“水平居中”將偏向右邊,大家可以將.e2中的padding-left刪除掉,然后再在線運行看一看效果。
笨鳥工具-璞玉天成,大器晚成
習HTML時有時候我們需要用代碼設置邊框或虛線邊框的樣式,那該怎么設置呢?下面上海非凡進修學院HTML5開發培訓機構大咖分享下html虛線邊框設置教程,會對幾個不同標簽加虛線邊框效果樣式,同學們可以根據示例靈活掌握與應用到自己DIV+CSS布局中。
為了對html不同標簽加邊框虛線,我們選擇幾個常用標簽對齊設置邊框虛線效果。
1、html常用標簽
div標簽
span
ul li
table tr td
2、實例用到CSS屬性單詞
border
width
height
3、實現虛線的CSS重點介紹
border為邊框屬性,如果要實現對象邊框效果,要設置邊框寬度、邊框顏色、邊框樣式(實線還是虛線)
border:1px dashed #F00 這個就是設置邊框樣式寬度為1px,虛線,虛線為紅色。
4、實例描述
我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。
5、HTML代碼示例:
以上示例對html中不同標簽設置相同的樣式,包括相同邊框虛線。
上海HTML5開發培訓機構大咖提示邊框三個樣式
通常我們可以對邊框設置寬度(厚度)、邊框樣式、邊框顏色這三個屬性與參數。
1)、邊框顏色:border-color:#000
2)、邊框厚度(寬度):border-width:1px
使用數字+單位設置邊框厚度寬度,如1px(邊框厚度寬度為1像素),邊框必須為正數字,大于0的數值。否則設置邊框border樣式無效。
3)、border邊框樣式:border-style:solid
上海HTML5開發培訓機構大咖提示:邊框border樣式值如下:
none :無邊框。與任何指定的border-width值無關
hidden : 隱藏邊框。IE不支持
dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線(常用)
dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線(常用)
solid :實線邊框(常用)
double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值
groove : 根據border-color的值畫3D凹槽
ridge :根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3D凹邊
outset : 根據border-color的值畫3D凸邊
*請認真填寫需求信息,我們會在24小時內與您取得聯系。