<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習</title>
<style type="text/css">
.underLine {
text-decoration: underline;
}
span > span {
text-decoration: underline;
font-weight: bold;
margin-left: 20px;
font-size: 13px;
}
div>span{
margin-left: 7px;
font-size: 13px;
}
</style>
</head>
<body>
<div style="height: 30px">
<div style="position:absolute;left: 0%;top: 0%;line-height: 30px;">
<span>大連:</span>
<img style="margin-left: 10px" src="天氣.png"/>
<span>23℃</span>
<span style="color: blue">優</span>
<span>43</span>
<span class="underLine">消息</span>
</div>
<span style="position: absolute;right: 0%;top: 0%;line-height: 30px;">
<span>新聞</span>
<span>hao123</span>
<span>地圖</span>
<span>視頻</span>
<span>貼吧</span>
<span>學術</span>
<span>登錄</span>
<span>設置</span>
<span style="display: inline-block;height:30px;color: white;background-color: cornflowerblue;text-align: center;padding-left: 10px;padding-right: 10px">更多產品</span>
</span>
</div>
<hr style="margin-top: 0px;background-color: #eeeeee;"/>
<div style="text-align: center;margin-top: 120px">
<img src="百度.png">
</div>
<form style="text-align: center;margin-top: 20px">
<input style="line-height: 30px;width: 540px" type="text"><span style="line-height: 30px;background-color: cornflowerblue;padding: 9px;color: white">百度一下</span>
</form>
<div style="position: fixed;width: 200px;height: 200px;right: 0%;bottom: 0%;">
我是小廣告<img style="margin-left: 90px" src="差.png">
<img width="100%" height="100%" src="藍鷗.png">
</div>
</body>
</html>CSS小功能
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
position:absolute下，top:0,right:0,bottom:0,left:0 結合margin:auto的作用（讓明確寬高的盒子水平垂直居中於父元素）
絕對定位 + margin，讓明確寬高的盒子水平垂直居中於窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="vie
幾個簡單的css動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi