启航第二份成果

最新推荐文章于 2024-08-19 17:16:10 发布

又要头秃了

最新推荐文章于 2024-08-19 17:16:10 发布

阅读量83

点赞数

文章标签： html webview 前端

本文链接：https://blog.csdn.net/weixin_69289422/article/details/124828218

版权

CSS的知识点很碎，每一步都需要重新观看视频学习，先把大框架实现，再从head的style里设置样式

源码

<!DOCTYPE html>

<head>

<title>百度一下，你就知道啦</title>

<style>

.turnleft{

left: 100px;

}

padding:0;margin:0;

color: #222;

}

text-decoration: none;

padding-left: 12px;

}

a:hover{

color:#4e71f2;

}

li{

list-style: none;

}

.header{

height: 60px;

line-height:60px;

text-align: center;

}

.header .left{

float:left;

}

.header .right{

position:absolute;

right:0px;

top:0px;

padding-right:24px;

float:right;

}

.header .li_1{

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

color:#222;

position:relative;

margin-right:31px;margin-top:19px;display:inline-block;

}

.right #more_li{

color:#222;

position:relative;

margin-right:35px;

display:inline-block;

font-size:14px;

}

.header .right .r1{

display:inline-block;

vertical-align:top;cursor:pointer;

}

.right #more_menu{

display:none;

position:absolute;

top:28px;

left:-14px;

width:85px;

height:165px;

line-height: 22px;

text-align: left;

box-shadow:0 2px 10px 0 rgba(0,0,0,.15);

border-radius: 6px;

margin-top:15px;

}

.right #more_menu li{

margin-top:9px;

}

#more_li:hover #more_menu{

display:block;

}

.header .right .r2{

display:inline-block;

margin-top:19px;

background-color: #4e71f2;

padding-left:2px;

font-size:14px;

height:24px;

width:48px;

color:#fff;

line-height: 24px;

border-radius:12px;

}

#more_wrap{

position:relative;

display:block;

}

.more_li{

float:left;

line-height:24px;

margin-left:12px;

margin-right:12px;

margin-top:16px;

}

.main{

clear:both;

width: 1500px;

}

#pic{

position:absolute;

left: 50%;;

top:45px;

margin-left:-135px;

width: 280px;

height: 129px;

}

.search1 {

position:absolute;

left:450px;

top:185px;

font-size:16px;

width: 546px;

height: 40px;

vertical-align: top;

border:2px solid #c4c7ce;

background-color: #fff;

color:#222;

overflow: hidden;

border-radius:10px 0 0 10px;

}

.search2 {

position: absolute;

top:185px;

left:1000px;

cursor: pointer;

width: 100px;

height:44px;

line-height: 45px;

background-color: #4e6ef2;

border-radius:0 10px 10px 0;

font-size:14px;

color:#fff;

text-align: center;

}

.main .search_r:hover{

background-color: #4662d9;

}

.main input:hover{

border-color: #a7aab5;

}

.main table{

margin:200px 380px;

width: 800px;

height: 180px;

font-size:15px;

left:10px;

}

.main #hhh{

padding-left:254px;

color:#a6a9b4;

}

.new{

display: inline-block;

background-color: #ff455b;

width: 14px;

height: 19px;

color:#fff;

padding:0 2px;

border-radius: 5px;

}

.hot{

display: inline-block;

background-color: #ff9812;

width: 14px;

height: 19px;

color:#fff;

padding:0 2px;

border-radius: 5px;

}

.end{

width: 100%;

height: 40px;

position:fixed;

bottom:0;

background-color: #fbfbfb;

line-height: 40px;

font-size:12px;

}

.end1 li a{

float:left;

padding-left:14px;

color:#9195a3;

}

.end1 li a:hover{

color:#222;

}

.end2 li a{

float:right;

font-size:16px;

padding-right:15px;

}

</style>

</head>

<body>

</div>

</li>

</ul>

<ul>

</ul>

</div>

</div>

<div>

</div>

<table>

<tr>

</tr>

<tr>

<td style="left: 100px;"><a href=""><span style="color:#fe2d46;">1</span>  大上海的烟火气正在回来  <span class="new">新</span></a></td>

<td><a href=""><span style="color:#9b9fac;left: 60px;">4</span>  一亩地也不撂荒热</a></td>

</tr>

<tr>

<td><a href=""><span style="color:#ff6600;left: 300px">2</span>  俄伊斯坎德尔导弹系统运往芬兰边境</a></td>

<td><a href=""><span style="color:#9b9fac;left: 60px;">5</span>  俄将采取军事措施回应瑞典加入北约</a></td>

</tr>

<tr>

<td><a href=""><span style="color:#faa90e;left: 300px">3</span>  中国公民在巴遇袭身亡策划者被捕  <span class="hot">热</span></a></td>

<td><a href=""><span style="color:#9b9fac;left: 60px;">6</span>  上市公司公告惊现“临死股东大会”</a></td>

</tr>

</table>

</div>

<ul>

<li><a href="">About Baidu</a></li>

<li><a href="">使用百度前必读</a></li>

<li><a href="">京公网安xxxxxxxxxxxxxx</a></li>

<li><a href="">京xxxxxxxxxx</a></li>

<li><a href="">互联网药品xxxxxxxxxxxxxxx</a></li>

<li><a href="">信息网络xxxxxxxxxx</a></li>

</ul>

</div>

</body>

</html>

效果图

又要头秃了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
启航第二份成果

CSS的知识点很碎，每一步都需要重新观看视频学习，先把大框架实现，再从head的style里设置样式源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi...
复制链接

扫一扫