代码
<title>今日头条</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>王可可是一条狗</div>
<div>20px</div>
<div>100px</div>
<div>10px 40px</div>
<div>10px 40px 80px</div>
<div>10px 40px 80px 100px</div>
<div>100px height100px</div>
<div>100px 0</div>
<div>内边距就是内容和边框的距离</div>
<div></div>
<div></div>
<hr>
用户名:<input type="text" class="user"><br>
昵 称:<input type="text" class="nc"><br>
邮 箱:<input type="text" class="email"><br>
手 机:<input type="text" class="tel"><br>
<hr>
<table cellspacing="0" cellpadding="0">
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>123</td>
<td>789</td>
<td>456</td>
</tr>
</table>
<hr>
<nav>
<a href="#">首页</a>
<a href="#">手机新浪网</a>
<a href="#">网站导航</a>
<a href="#">三个字</a>
</nav>
<header>头部标签</header>
<br>
<br>
<hr>
1.文字水平居中和盒子水平居中.
<div>文字水平居中</div>
2.插入图片和背景图片
<section>
<img src="image/dxx.jpg" width="379" height="335" alt="">
</section>
<aside>
123546789
</aside>
<hr>
文字
<p>abc</p>
<p>abc</p>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<hr>
<span>行内元素</span>
<hr>
<div class="father">
<div class="son"></div>
</div>
<hr>
<div></div>
<hr>
<div class="xinwen">新闻</div>
<hr>
<div class="bb">奔跑吧，兄弟</div>
css代码
* {
margin: 0;/*清除外边距*/
padding: 0;/*清除内边距*/
}
/*div {
width: 200px;
height: 200px;
border-width: 10px; 边框宽度 粗细
border-color: pink; 边框颜色
border-style: solid;边框样式,实线
border-style: dashed; 边框样式,虚线
border-style: dotted; 边框样式,点线
}*/
div {
width: 200px;
height: 200px;
border: 1px solid pink;
/*margin-top: 100px;*/
/*margin-left: 50px;*/
margin: 30px auto; /*上下是30像素，左右是自动，这样可以块级带有宽度的盒子水平居中对齐*/
padding: 4px;
}
div:first-child {
border-width: 5px;
border-style: double; /*边框样式,实线*/
}
div:nth-child(2) {
border-radius: 20px;
}
div:nth-child(3) {
border-radius:100px;
}
div:nth-child(4) {
border-radius:10px 40px; /*左上角和右下角是10像素，左下角和右上角是40px，对角线*/
}
div:nth-child(5) {
border-radius:10px 40px 80px;/*左上角是10px，左下角和右上角是40px，右下角是80px*/
}
div:nth-child(6) {
border-radius:10px 40px 80px 100px;
}
div:nth-child(7) {
border-radius: 100px;
height: 100px;
}
div:nth-child(8) {
border-radius: 100px 0;
}
div:nth-child(9) {
/* padding-left: 20px;左内边距*/
/*padding-top: 20px;上内边距*/
/* padding: 20px;如果只有一个值表示，上下左右都是20像素*/
/*padding: 10px 30px;上下10像素，左右30像素*/
/*padding: 10px 30px 50px;上边10像素，左右30像素，下边50像素*/
padding: 10px 30px 40px 50px;/*顺时针 上右下左*/
}
div :nth-child(10){
width: 200px;
height: 200px;
background-color: pink;
}
div :nth-last-child(11) {
background-color: purple;
}
input {
border:0;/*没有边框*/
}
.user {
border-width: 1px;
border-color: pink;
border-style: solid;
}
.nc {
border-width: 1px;
border-color: pink;
border-style: solid;
}
.email {
border-top: 1px solid pink ;/*上边框 宽度 样式 颜色*/
border-bottom: 1px solid pink;/*下边框 宽度 样式 颜色*/
}
.tel {
border: 1px solid pink;
}
table {
width: 700px;
height: 300px;
border: 1px solid black;
border-collapse: collapse;/*合并相邻边框*/
}
td {
border: 1px solid black;
}
nav {
height: 41px;
background-color: #FCFCFC;
border-top: 3px solid #FF8500;/*上边框*/
border-bottom: 3px solid #EDEEF0;/*下边框*/
}
nav a {
font-size: 14px;
color: #4C4C4C;
text-decoration: none;/*取消下划线*/
padding: 0 15px;/*上下是0像素，左右是15像素*/
height: 41px;
line-height: 41px;/*行高等于高度可以文字垂直居中*/
/*因为链接是行内元素没有大小 所以需要转换 行内快 */
display: inline-block;
}
nav a:hover { /*链接伪类选择器 鼠标经过a链接的时候*/
background-color: red;
}
header {
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;/左右一定是auto就可以居中*/
}
div {
width: 300px;
height: 100px;
border: 1px solid pink;
text-align: center;/*文字水平居中*/
margin: 10px auto;/*盒子水平居中*/
}
section {
width: 400px;
height: 400px;
border: 1px solid black;
}
section img {/*插入图片更改大小，width和height*/
width: 200px;
height: 200px;
margin-top: 50px;/*插入图片更改位置可以用margin或padding 盒模型*/
margin-left: 50px;/*插入当图片也是一个盒子*/
}
aside {
width: 1000px;
height: 1000px;
border: 1px solid blue;
background: url("../image/mm.jpg") no-repeat;
background-size: 630px 630px;/*背景图片更改大小*/
background-position: 160px 200px;/*背景图片更改位置*/
}
span {
background-color: pink;
/* margin: 30px 50px;/*上下30 左右50*/
/*padding: 50px;/*上下左右都是50*/
}
.father {
width: 300px;
height: 300px;
background-color: pink;
margin-top: 100px;
border: 1px solid red;/*解决外边距（塌陷）问题*/
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 20px;
}
div {
width: 100px;
height: 100px;
/*background-color: pink;*/
border: 5px solid red;
padding: 10px;
margin: 20px;
}
/*空间尺寸=width+border+padding+margin；*/
div.xinwen {
width: 59px;
height: 33px;
line-height: 33px;
border: 1px solid #C1C1C1;
margin: 200px;
font-size: 16px;
color: #666666;
border-radius: 5px 0 0 5px;
padding-left: 15px;
}
div .dd {
height: 30px; /*高度30像素*/
border: 1px solid red;
padding-left: 20px;
padding-top: 10px;
}
结果
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
代码
<title>奔跑吧，兄弟</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>奔跑吧，兄弟</div>
<nav>
<p>摔跤吧，爸爸</p>
</nav>
css代码
div {
height: 30px; /*高度30像素*/
border: 1px solid red;
padding-left: 20px;/*因为这个盒子没有宽度 所以padding不会影响盒子的宽度*/
padding-top: 10px;
/*width: 100%;*/
}
nav {
width: 300px;
height: 40px;
border: 1px solid pink;
}
p {
/*因为p没有指定宽度，则会默认和父亲一样宽，块级元素*/
height: 20px;
background-color: pink;
padding-left: 30px;/*此时padding值不会影响盒子的宽度*/
}
结果
image.png
