论坛

标题: 仿百度w3cd页面 [打印本页]

作者: 睡不着的海lm    时间: 2018-2-12 17:43
标题: 仿百度w3cd页面
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>心世界</title>





  6. /*    亲爱的韩老师,您好! 我这里遇到了三个小问题,自己努力了很久却还是不得要领,所以只好来麻烦老师了:
  7.   1.我这有两个<p>标签,两个p标签里都有带下划线的文字,我无法掉它的下划线,找不出问题出在哪了,希望老师指点!
  8.   2.p1标签里不能设置它的内边距!和P标签是一模一样的设置,可是在p1里却不起作用,不知道原因在哪…………
  9.   3.在P标签里有个上标“[1]”我想把它变成绿色,我该怎么打操作?*/
  10. 以上三个小问题,把我难倒了,我做了好久都没找出原因,所以非常希望得到老师的指点!非常感谢!


  11. <style>
  12.         *{padding:0;margin: 0;}
  13.         body{background: rgba(201,194,194,1.00);}
  14.         .header        {height: 80px; background: #fff;}
  15.         .nav{height: 40px; width: 100%;  background: rgba(26,92,244,1.00);}
  16.        
  17.         .nav ul{width: 1000px; height: 40px;   margin: 0 auto; list-style: none;}
  18.        
  19.         .nav ul li{ float: left;}
  20.        
  21.        
  22.         .nav ul li a{display: block; font-size: 18px; font-family: "微软雅黑"; color: #fff; text-align: center;line-height: 40px; width:160px; text-decoration: none;}
  23.         .nav ul li a:hover{color: rgba(167,27,248,1.00)}

  24.        
  25.         .main{width: 1000px;background: #fff; margin: 20px auto 10px; border: 1px solid rgba(33,31,31,1.00);}
  26.        
  27.         .main h1{color:#333030; font-size:34px; border-left:  10px solid rgba(37,65,229,1.00);  padding-left:20px; margin: 30px auto 15px; }
  28.        
  29.         .main p{font-size:20px; font-family:"微软雅黑";line-height: 1.8em; text-indent: 2em; padding:20px 30px 10px 10px; text-decoration: none; }
  30.         .mai p sup{color: rgba(12,37,228,1.00)}
  31.        
  32.        
  33.         .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;}
  34.        
  35.         .main a:hover{color: rgba(126,9,240,1.00) ;text-decoration: none;}
  36.        
  37.         .main .small_title{ font-size: 12px; padding: 10px 30px 20px;}
  38.         .main .small_title a{border: 1px solid rgba(67,19,85,1.00);padding:3px;}
  39.        
  40.         .main .small_title span{color: rgba(224,29,8,1.00)}
  41.        
  42.         </style>
  43.                
  44.        






  45. </head>

  46. <body>


  47.         <div class="header"></div>
  48.         <div class="nav">
  49.                 <ul>
  50.                         <li><a href="#">首页</a></li>
  51.                        
  52.                         <li><a href="#">产品分类</a></li>
  53.                         <li><a href="#">哈罗闪系列</a></li>
  54.                         <li><a href="#">艾维诺系列</a></li>
  55.                         <li><a href="#">b.box系列</a></li>
  56.                
  57.                         <li><a href="#">妙思乐系列</a></li>
  58.                 </ul>
  59.                
  60.         </div>

  61.        
  62.        
  63.        
  64.        
  65.                 <div class="main">
  66.                        
  67.                         <h1>基本信息</h1>
  68.                
  69.                         <div class="small_title"><a hover="#">心世界</a><span>无限丰富</span>无法猜透</div>
  70.                        
  71.                        
  72.                        
  73.                         <p><a href="#">心世界,</a>有人钟爱于草木山石,有人钟爱于一山一水,有人钟爱于诗酒琴茶,有人将心交付给山水禅佛,有人生性爱自然。无论是一山一水,还是一草一木,芸芸众生,一切皆有情。今生是第<sup><a herf="#">[1]</a></sup>次,或许与你心心相印,令你所痴迷的旧物,定是与你结下了某段不解之缘。在这纷繁喧嚣的尘世,倘若心中有所追求,有所寄托,内心才不至于荒芜。处繁华中守住真淳,于纷芜中静守心性,内心一片澄澈明朗,自会与大自然中的一草一木,成为知己,乃至心心相印。</p>
  74.                        
  75.                        
  76.                         <p1>惟愿在这尘世间修行的你我,行走在红尘间,心中仍旧能拥有一片桃花源。惟愿有朝一日,在红颜老去之时,能够有一座小小的庭院,将我搁置。此后,焚香煮茶、抚琴作画、<a href="#">听雨读书</a>、洒扫庭院、烧茶煮饭,归隐某个不知名的村落,或是某个清冷的古镇,或是一处叫落梅小筑的地方,纵情于山水田园之间。任尔红尘滚滚,我自清风朗月。此后,心中再无愁烦忧虑,内心从此洁净无尘,笔下的文字,亦是如行云流水,飘逸自如。</p1>
  77.                
  78.                
  79.                
  80.                
  81.                
  82.                 </div>










  83. </body>
  84. </html>
复制代码



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




欢迎光临 论坛 (http://bbs.qinxue.com/) Powered by Discuz! X3.1