Maison > interface Web > tutoriel HTML > le corps du texte

菜鸟学习路,遇到了问题请大神帮忙_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:21:07
original
861 Les gens l'ont consulté

我就想做出来这种效果,用了opacity:0.5;还是不管用啊


回复讨论(解决方案)

贴下你的代码

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







index




     菜鸟学习路,遇到了问题请大神帮忙_html/css_WEB-ITnose

     

    

    

            
  • 首页

  •             
  • 关于美联

  •             
  • 选车中心

  •             
  • 美联新车

  •             
  • 活动咨询

  •             
  • 买卖流程

  •             
  • 金牌服务

  •             
  • 美联速拍

  •         

       
    




.background{ width:100%;height:60px; background-color:#000;opacity:0.5; margin-top: -60px;}
这里加一个margin-top:-60px;

background为什么要加margin-top:-60px;他的位置正好和index-nav一平的哦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="x-ua-compatible" content="ie=7" /><meta content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=1,user-scalable=yes" name="viewport"><link href="../css/index.css" type="text/css" rel="stylesheet" /><style type="text/css">.index-all{ width:100%; font-family:微软雅黑; height:1000px;}.logo{width:100%;}.background{ width:100%;height:60px; background-color:#000;opacity:0.5;}.logo img{ width:100%;}.index-nav{ width:100%; margin:auto; height:60px; position:absolute; margin-top:-60px;}.index-nav ul{ list-style-type:none;  margin:auto;width:60%; line-height:50px;}.index-nav ul li{ float:left; padding-left:3.3%; padding-right:3.3%; color:#FFF;}</style><title>index</title></head><body><div class="index-all"><div class="logo">    	<img  src="../image/logo1.png"/ alt="菜鸟学习路,遇到了问题请大神帮忙_html/css_WEB-ITnose" ></div>     <div class="background"></div>    <div class="index-nav">    	<ul>        	<li>首页</li>            <li>关于美联</li>            <li>选车中心</li>            <li>美联新车</li>            <li>活动咨询</li>            <li>买卖流程</li>            <li>金牌服务</li>            <li>美联速拍</li>        </ul>           </div></div></body></html>
Copier après la connexion


透明度调高点

style中的index-all是什么意思?

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal