整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
目中有時候會遇到這個問題：一行有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小時內與您取得聯系。
