基本网页练习
2018-08-15 本文已影响11人
GHope
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书橱</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
background-color: aquamarine;
}
#h{
margin: 40px;
text-align: center;
}
#Psychological{
position: absolute;
left: 666px;
top: 111px;
margin-left: 20px;
margin-top: 3px;
}
.art{
margin: 33px;
}
.t3{
margin-left: 21px;
}
p{
font: "微软雅黑" ;
font-size: x-large;
}
#link{
position: absolute;
left: 963px;
top: 111px;
margin-left: 20px;
margin-top: 3px;
border: 3px dotted red;
border-bottom-color: red;
border-radius: 66px;
}
a{
position: absolute;
left: 180px;
}
#up{
position: fixed;
bottom: 66px;
left: 1450px;
}
</style>
</head>
<body>
<b><h2 id="h"> ———— 日常品读 ———— </h2></b>
<img src="img/颜如玉.jpeg"height="380px"/>
<div id="Psychological">
<h4 >浅谈心理:</h4>
<img src="img/沟通.jpg" width="255px" height="173px"/>
<div id="">
<img src="img/沟通起源.jpg"/>
<img src="img/自信表达.jpg"height="173px"/>
</div>
</div>
<div id="link" style="width: 500px;height: 400px; background-color: lightyellow;">
<a href="https://www.dxsbb.com/news/list_79.html" >经典书籍电影推荐</a>
</div>
<div id="float">
</div>
<div id="graphic_design" class="art">
<p align="center" >书籍装帧</p>
<img src="img/Gauffered Edge.jpg" height="400px" width="32%"/>
<img src="img/Mabled Edge.jpg" height="400px" width="32%" class="t3"/>
<img src="img/Fore-edge Painting.jpg" height="400px" width="32%" class="t3"/>
</div>
<a href="" id="up"><img src="img/up.jpg" width="40px" height="60px"/></a>
</body>
</html>
book.gif
