仿百度w3cd页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>心世界</title>
/* 亲爱的韩老师，您好！我这里遇到了三个小问题，自己努力了很久却还是不得要领，所以只好来麻烦老师了:
1.我这有两个<p>标签，两个p标签里都有带下划线的文字，我无法掉它的下划线，找不出问题出在哪了，希望老师指点！
2.p1标签里不能设置它的内边距！和P标签是一模一样的设置，可是在p1里却不起作用，不知道原因在哪…………
3.在P标签里有个上标“[1]”我想把它变成绿色，我该怎么打操作？*/
以上三个小问题，把我难倒了，我做了好久都没找出原因，所以非常希望得到老师的指点！非常感谢！
<style>
*{padding:0;margin: 0;}
body{background: rgba(201,194,194,1.00);}
.header {height: 80px; background: #fff;}
.nav{height: 40px; width: 100%; background: rgba(26,92,244,1.00);}
.nav ul{width: 1000px; height: 40px; margin: 0 auto; list-style: none;}
.nav ul li{ float: left;}
.nav ul li a{display: block; font-size: 18px; font-family: "微软雅黑"; color: #fff; text-align: center;line-height: 40px; width:160px; text-decoration: none;}
.nav ul li a:hover{color: rgba(167,27,248,1.00)}
.main{width: 1000px;background: #fff; margin: 20px auto 10px; border: 1px solid rgba(33,31,31,1.00);}
.main h1{color:#333030; font-size:34px; border-left: 10px solid rgba(37,65,229,1.00); padding-left:20px; margin: 30px auto 15px; }
.main p{font-size:20px; font-family:"微软雅黑";line-height: 1.8em; text-indent: 2em; padding:20px 30px 10px 10px; text-decoration: none; }
.mai p sup{color: rgba(12,37,228,1.00)}
.main p1{font-size:20px; font-family:"微软雅黑"; color: rgba(1,36,171,1.00); line-height: 1.8em; text-indent: 2.5em; margin: 10px 30px; text-decoration: none;}
.main a:hover{color: rgba(126,9,240,1.00) ;text-decoration: none;}
.main .small_title{ font-size: 12px; padding: 10px 30px 20px;}
.main .small_title a{border: 1px solid rgba(67,19,85,1.00);padding:3px;}
.main .small_title span{color: rgba(224,29,8,1.00)}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品分类</a></li>
<li><a href="#">哈罗闪系列</a></li>
<li><a href="#">艾维诺系列</a></li>
<li><a href="#">b.box系列</a></li>
<li><a href="#">妙思乐系列</a></li>
</ul>
</div>
<div class="main">
<h1>基本信息</h1>
<div class="small_title"><a hover="#">心世界</a><span>无限丰富</span>无法猜透</div>
<p><a href="#">心世界,</a>有人钟爱于草木山石，有人钟爱于一山一水，有人钟爱于诗酒琴茶，有人将心交付给山水禅佛，有人生性爱自然。无论是一山一水，还是一草一木，芸芸众生，一切皆有情。今生是第<sup><a herf="#">[1]</a></sup>次，或许与你心心相印，令你所痴迷的旧物，定是与你结下了某段不解之缘。在这纷繁喧嚣的尘世，倘若心中有所追求，有所寄托，内心才不至于荒芜。处繁华中守住真淳，于纷芜中静守心性，内心一片澄澈明朗，自会与大自然中的一草一木，成为知己，乃至心心相印。</p>
<p1>惟愿在这尘世间修行的你我，行走在红尘间，心中仍旧能拥有一片桃花源。惟愿有朝一日，在红颜老去之时，能够有一座小小的庭院，将我搁置。此后，焚香煮茶、抚琴作画、<a href="#">听雨读书</a>、洒扫庭院、烧茶煮饭，归隐某个不知名的村落，或是某个清冷的古镇，或是一处叫落梅小筑的地方，纵情于山水田园之间。任尔红尘滚滚，我自清风朗月。此后，心中再无愁烦忧虑，内心从此洁净无尘，笔下的文字，亦是如行云流水，飘逸自如。</p1>
</div>
</body>
</html>

复制代码

潜意式 · 发表于 2018-2-22 18:01:42

p标签中包含带下划线的文字是用<a>标签包裹起来了，而你的<a>标签是设置了下划线样式的。
<p1>是没有这个标签的，可以这编写html代码部分<div class="p1">......</div>，然后你在css样式中，就可以定义p1的样式了。
.mai p sup{color: rgba(12,37,228,1.00)}这样设置没有问题，但是main掉了个n，所以不起作用。

[作业] 仿百度w3cd页面

共1个回复最后回复于 2018-2-22 18:01

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 仿百度w3cd页面

共1个回复 最后回复于 2018-2-22 18:01

共1个回复最后回复于 2018-2-22 18:01