我的第一篇博文
2018-11-24 本文已影响33人
吾心橙
我想做一名前端工程师，我给自己定了3个多月时间，下面是我写的第一篇博文，记录我的前端入职第一个学习路程，有不足的地方，欢迎指出，交流。
我的博客预览
image.png
头部样式
image.png
代码如下：
<div id="top" style="background: url(img/1200x406a0a0.jpg); background-repeat:no-repeat;
background-size: 100%;"/>
背景样式代码:
<body background="img/timg.jpg" style="background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed;">
这是首页样式预览：
image.png
代码如下：
<div id="xu1" >
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">随笔</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">编程</a></li>
<li><a href="#">给博主留言</a></li>
<li><a href="#">联系我们</a></li>
</ul>
#xu1 ul{
list-style-type: none;
float: left;
font-size: 25px;
color:#FFF;
}
#xu1 ul li{
float:left;
padding:10px;
margin:5px 5px 0px;
}
}
#xu1 ul li a{
text-decoration:none;
color:white;
}
#xu1 ul li>a:hover{
color:lawngreen;
background:orangered;
右边输入框样式：
image.png
代码如下：
<div id="xu">
<input type="text" style="height:25px;width:200px" placeholder="请输入关键字..." />
</div>
<img src="img/github.png" width="30px" height="30px;" />
<img src="img/hover-qq.png" width="30px" height="30px" />
<img src="img/hover-email.png" width="30px" height="30px" />
</div>
#xu {
float: right;
padding: 5px 0px 0px;
<div id="xu2">
#xu2 {
text-align: right;
padding: 60px 10px 100px;
}
中间样式:
image.png
<div id="xu3">
<h3>最新发布</h3>
<hr color="#800080" width="1000%"/>
</div>
#xu3 h3 {
font-size: 30px;
margin: 50px 60px 0px;
padding: 0px 0px 0px;
letter-spacing: 15px;
color: #FF4500;
样式预览：
image.png
<div id="xu3">
<ul>
<li><a href="#xu4">div</a></li>
<li><a href="#xu5">span</a></li>
<li><a href="#xu6">a</a></li>
<li><a href="#xu7">br</a></li>
<li><a href="#xu8">p</a>
</ul>
#xu3 {
width: 300px;
height: auto;
}
#xu3 ul {
font-size: 25px;
margin: 30px;
float: left;
line-height: 60px;
list-style-type: none;
border: 2px solid gray;
width: 200px;
height: auto;
position: absolute;
}
#xu3 ul li a {
text-decoration: none;
}
#xu3 ul li>a:hover {
color: #900;
}
右边盒子样式:
image.png
具体代码：
<div id="xu4">
<p>div具有分割作用 div与css样式可以让网页实现各种样式效果。</br></br></br>
<img src="img/1.png"/>
</p>
</div>
#xu4 {
width: 60%;
height: 500px;
float: right;
border: 1px solid gray;
padding: 0px 80px 0px;
margin: 100px;
font-size: 30px;
}
