HTML与CSS布局实践-优快云博客

本文链接：https://blog.youkuaiyun.com/wjx_qlh/article/details/73863317

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
body{
margin: 0;
}
nav{
width: 100%;
height: 80px;
background-color: white;
/*设置盒子的阴影颜色*/
box-shadow: 0 10px 10px black;

/*padding-top: 10px;
padding-left: 50px;
box-sizing: border-box;*/
/*设置定位信息为固定定位*/
/*fixed 固定*/
position: fixed;
/*堆叠等级 z轴方向*/
z-index: 1;

}
nav>img{
width: 200px;
height: 60px;
/*控制img的位置*/
/*1.修改margin*/
margin-top: 10px;
margin-left: 50px;
/*2 padding */

/*3 修改position */
/*position: relative;
top: 10px;
left: 50px;*/
}
nav>span{
float: right;
/*设置行高*/
line-height: 80px;
}
nav>span>a{
text-decoration: none;
font-size: 25px;
margin-left: 10px;
}
header{
width: 100%;
height: 500px;
background-image: url("imgs/header.jpg");
background-size: 100% 100%;
}

main{
width: 80%;
margin: 0 auto;
border: solid 1px black;
}
section>img{
width: 100%;
}
p{
text-indent: 2em;
font-family: "楷体";
/*伪类和伪元素*/
}
p::before{
/*content 内容*/
content: "“";
color: red;
}
p::after{
content: "”";
color: red;
}
h1{
border-left: solid 5px orange;
padding-left: 20px;
color: orange;
}
#secondbg{
/*width: 100%;*/
height: 300px;
background-image: url("imgs/HomePage.jpg");
background-size: 100% 100%;
}
/*小的div 添加刘若英的图片*/
#secondbg>div{
width: 100px;
height: 100px;
background-size: 100% 100%;
background-image: url("imgs/lry.jpg");
/*radius 半径*/
border-radius: 50%;
/*可以指定四个角的边角半径*/
/*border-top-left-radius: */
position: relative;
top: 100px;
left: 100px;
border: solid 2px green;
}
address{
text-align: center;
}
</style>
</head>
<body>

<nav>
<img src="imgs/logo.png" alt="">
<span>

<a href="02选择器的优先级.html">首页</a>
<a href="#html">我的HTML</a>
<a href="">我的学校</a>
<a href="">我的家乡</a>
<a href="#">关于我</a>
</span>
</nav>
<header></header>
<main>
<p>据悉，本次春季征兵将于4月1日至7月15日进行。届时，俄罗斯武装力量将新增14.2万人。去年的春季征兵共有15.5万名俄罗斯新兵加入。</p>
<section id="html">
<h1>我的HTML</h1>
<img src="imgs/html5.jpg" alt="">
<p>据悉，本次春季征兵将于4月1日至7月15日进行。届时，俄罗斯武装力量将新增14.2万人。去年的春季征兵共有15.5万名俄罗斯新兵加入。</p>
</section>
<section>
<h1>你的女朋友</h1>
<div id="secondbg">
<div></div>
</div>
<p>据悉，本次春季征兵将于4月1日至7月15日进行。届时，俄罗斯武装力量将新增14.2万人。去年的春季征兵共有15.5万名俄罗斯新兵加入。</p>
</section>
<section>
<h1>你的家乡</h1>
<img src="imgs/classmates.jpg" alt="">
<p>据悉，本次春季征兵将于4月1日至7月15日进行。届时，俄罗斯武装力量将新增14.2万人。去年的春季征兵共有15.5万名俄罗斯新兵加入。</p>
</section>
<hr style="color: red;width: 90%">
<address>河南省郑州市经济开发区经三路经开第五大街河南通信产业园6楼电话88888598</address>
</main>
</body>
</html>

简单的个人主页