?

/* 1.文字居中 默認left*/
　　　　　　text-align: center;

　　　　　　font-size: 20px;
/* 2.首行縮進 px em */幾個字
　　　　　　text-indent: 4em;

/* 3.是否斜體 */
　　　　　　font-style: italic;

/* 4.是否加粗 normal*/默認的
　　　　　　font-weight: bold;

/* 5.font的屬性連寫:按照順序寫*/
/* 斜體 粗體 字體大小 行高 字體 */
/* font: italic bold 20px/50px "Microsoft Yahei"; */
font: 20px/50px "Microsoft Yahei";沒有的可以不寫，最好寫上normal

/* 6.元素溢出 */

/* //默認 */
/* overflow: visible; */

/* 隱藏超出的內容 沒有了 */
/* overflow:hidden; */

/* 滾動查看溢出的內容 */
/* overflow: scroll; */ 滾動條 有的會出橫條
overflow:auto; 就不出橫條了 好用

選擇器
/* 1.ID選擇器 id唯一; js的時候使用*/
#three{

color: gold;
}

/* 2.并集選擇器,組選擇器
strong 語言含義:重要的內容;默認加粗

*/
span,strong{

color: green;
}

/* 3.偽類選擇器 */
a{
text-decoration: none;
}
格式：名：屬性

/* 鼠標懸浮狀態 hover */
a:hover{
　　color: orange;
}

/* 給當前內容的前面 加東西 */
a:before{
　　content: "前面的";
}
/* 給當前內容的后面 加東西 */
a:after{

　　content: "后面的";
}

<!-- 1.有序列表 ol li
ol orderlist
li list
type="A" a i I
-->
<ol type="A">
<li>高級會員</li>
<li>中級會員</li>
<li>初級會員</li>
</ol>

<!-- 2.無序列表 經常使用
ul unorder list
li list

disc circle
-->
<ul type="circle" class="list">
<li>1.高級會員</li>
<li>2.中級會員</li>
<li>3.初級會員</li>
</ul>
/* 取消左側的小圓點 */
list-style: none

<!-- 定義列表 defination list
dl defination list
dd defination description
dt defination title
-->

<dl>
<dt>高級會員</dt>
<dd>無限量大片免費</dd>
<dd>無限量文章免費</dd>
<dd>濱崎步簽名照</dd>
</dl>

<!-- 表單
form :用來提交用戶輸入的數據
action:提交的網址: 默認就是當前網址
method:提交方式: 默認是get :不安全
post:相對安全
-->

h1>個人信息注冊</h1>
<form action="" method="get">

<!-- 1.用戶名
lable 標注信息
-->
<p> name表示提交的字段
<lable>用戶名:</lable>
<input type="text" placeholder="請輸入用戶名" name="username">
</p>
<!-- 2.密碼 -->
<p>
<lable>密&nbsp;&nbsp;&nbsp;碼:</lable>
<input type="password" name="pwd">
</p>
<!-- 3.性別 -->
<p>
<lable>性&nbsp;&nbsp;&nbsp;別:</lable>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<!-- 4.愛好 -->
<p>
<lable>愛&nbsp;&nbsp;&nbsp;好:</lable>
<input type="checkbox" name="like" value="0" >睡覺
<input type="checkbox" name="like" value="1" >學習
<input type="checkbox" name="like" value="2" >看視頻
<input type="checkbox" name="like" value="3" >健身
</p>
<!-- 5.玉照 -->
<p>
<lable>玉&nbsp;&nbsp;&nbsp;玉:</lable>
<input type="file" name="file">
</p>

<!-- 6.下拉列表 -->
<p>
<lable>籍&nbsp;&nbsp;&nbsp;貫:</lable>
<select name="address" >
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2" selected="selected">廣州</option> 默認選
<option value="3">深圳</option>
</select>
</p>

<!-- 7.個人描述 -->
<p>
<lable>個人描述:</lable>
<!-- 文本域 cols="30" rows="40"-->
<textarea name="info" id="" ></textarea>
</p>

<!-- 9.隱藏域 -->不會顯示，自己默認設置記錄呢
<input type="hidden" name="isVip" value="YES">

<!-- 10.普通按鈕 -->
<input type="button" value="普通按鈕">

<!-- 7.個人描述 -->
<input type="submit" value="注冊">

<!-- 8.重置 -->
<input type="reset">

</form>

/* 2.內邊距 */
/* padding-left:20px;
padding-right:20px; */

/* 3外邊距 */
/* margin-top:100px; */

/* 邊框和內邊距的改變 會改變盒子的真實寬高 */
/* 盒子的真實高度== border的上下+padding的上下;
盒子的真實寬度== border的左右+padding的左右; */

/* //水平居中 */
margin: 0 auto 0;
}

?

/* //固定值計算 window變小變大不能適配 */
/* margin-left:540px; */

/* margin負值 邊框合并 */
margin: -10px auto 0;

/* 垂直外邊距發生合并: 誰大取誰 */
margin-bottom: 10px;

/* 解決塌陷問題
1.設置父元素的border
2.設置父元素的overflow:hidden;
3.使用偽類:一般都使用第三種

*/

/* border: 1px solid peru; */
/* overflow:hidden; */

}

.clearfix:before{
content:"";
display: table;
}
.smallbox{

width: 200px;
height: 200px;
background-color:rgb(120, 110, 119);

/* 盒子嵌套的時候, 設置內部盒子的margin-top 有塌陷的現象 */
margin-top:100px;

轉載于:https://www.cnblogs.com/lvhonglei-python/p/7476861.html

總結

以上是生活随笔為你收集整理的02html和css的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。