html＋css模仿百度首页静态网页

斜刘海遮住右眼的眼屎

已于 2022-10-04 21:42:18 修改

阅读量1.7k

点赞数 4

文章标签： html css

于 2022-03-26 23:49:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65450526/article/details/123766478

版权

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

ul li{

list-style-type: none;

}

text-decoration: none;

color: black;

}

a:hover{

color: blue;

}

#www{

width: 498px;

height: 60px;

float: left;

line-height: 40px;

}

.qqq li{

float: left;

margin: 10px;

}

#xx{

width: 120px;

float: right;

height: 60px;

margin: 0px 0px;

}

#cle{

clear: both;

}

#www li a{

font:13px/23px Arial,sans-serif

}

#xx li a{

font:13px/23px Arial,sans-serif;

float: left;

margin: 10px;

}

.div1{

clear: both;

}

#wal{

width: 270px;

height: 128px;

margin: 0px auto;

}

#zzz{

width: 654px;

height: 42px;

margin: 50px auto;

}

.hg{

width: 546px;

height: 40px;

position: absolute;

margin: 15px 26px;

border-radius: 10px 0 0 10px;

border-color:#c4c7ce;

border:solid 1px;

}

.kj:hover{

background-color;rgd(0,89,205)

}

.kj{

width: 108px;

height: 42px;

color: white;

background-color: royalblue;

cursor: pointer;

margin: 15px 572px;

border-radius: 0 10px 10px 0;

font-size: 20px;

}

#aa{

position: relative;

}

.hg:focus{

outline: none;

border-color:#4e6ef2;

}

#ss{

width: 24px;

height: 20px;

background: url(nicon-10750f3f7d.png) no-repeat 0px -50px;

position: absolute;

bottom: -46px;

right: 83px;

}

#ss:hover{

background: url(nicon-10750f3f7d.png)no-repeat 0px -73px;

}

#lm{

width:654px;

height: 140px;

margin: 30px auto;

}

#sb{

float: left;

}

#ff{

float: right;

}

#jj{

clear: both;

}

.div2{

float: left;

}

.div3{

float: right;

}

#gg1{

color: #fe2d46

}

#gg2{

color: #f60

}

#gg3{

color: #faa90e;

}

.ht{

width: 100%;

height: 80px;

position:fixed;

bottom: 0px;

}

#he{

width: 100%;

height: 40px;

bottom: 0px;

position: fixed;

text-align: center;

line-height: 39px;

font-size: 12px Arial,sans-serif;

color: #bbb;

}

#he:hover{

color: #000000;

}

#he a{

color: #bbb;

}

#he a:hover{

color: #000000;

}

.fg{

width: 304px;

height: 223px;

background: #FFFFFF;

position: fixed;

display: none;

left: 110px;

border-radius: 10px 10px 10px 10px;

z-index: 10;

border: 1px solid rgba(0,0,0,.03);

box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);

letter-spacing: 5px;

}

.qqq>li:hover .fg{

display: block;

}

.qqq .fg img{

width: 42px;

height: 42px;

top: 0px;

border: 1px solid rgba(0,0,0,.03);

}

.ee {

text-align: center;

margin-top: 3px;;

}

</style>

</head>

<body>

<li>

</ul>

</ul>

</center>

</li>

</ul>

</div>

</ul>

</div>

< img src="baidu.png" width="270px" height="128px"/>

</div>

</div>

</div>

<li><span id="gg1">1</span>&emsp;十个坚持总结百年奋斗历史经验热 </li>

<li><span id="gg2">2</span>&emsp;学生呕吐事件送餐公司2人被刑拘</li>

<li><span id="gg3">3</span>&emsp;如何运用党史观贯彻六中全会《决议》</li>

</ul>

</div>

<ul>

<li><span id="g4">4</span>&emsp;32国取消中国出口产品普惠制待遇新</li>

<li><span id="g4">5</span>&emsp;奥密克戎已在17个国家及地区出现</li>

<li><span id="g4">6</span>&emsp;酷女孩的胶囊衣橱</li>

</ul>

</div>

<a>About Baidu</a >

<a>使用百度前必读</a >

<a>京公网安备11000002000001号</a >

<a>京ICP证030173号</a >

<span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span>

<a>信息网络传播视听节目许可证 0110516</a >

</div>

</body>

</html>

效果图

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pac5YiY5rW36YGu5L2P5Y-z55y855qE55y85bGO,size_20,color_FFFFFF,t_70,g_se,x_16

更多那个ul没写好懒得改了