ホームページ > 記事 > ウェブフロントエンド > 初心者は方法を学んでいます。問題が発生した場合は、help_html/css_WEB-ITnose について専門家に問い合わせてください。
初心者は方法を学んでいます。問題が発生した場合は、help_html/css_WEB-ITnose について専門家に問い合わせてください。
- WBOYオリジナル
- 2016-06-21 09:21:07862ブラウズ
この効果を作成したいだけですが、opacity:0.5;を使用しても機能しません/ W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
c8ff0c3eaffe1b80a215d7d14be38452
93f0f5c25f18dab9d176bd4f6de5d30e 5405df3e690fad038bc23655cabf7012bc90c7cfb3c67e2898ce4cbee283f883
08dc9b317c794cd7b8751d7635ffa14e
ae924b1624ed37e14f9b89a0d26ab2cf 6b923ebce1b690bcf352bccc61522e2b
.index-all{ width:100%; font-family:Microsoft Yahei; height:1000px;}
.background{ width:100%;height :60px; 背景色:#000; 不透明度:0.5;
.logo img{ width:100%;}
.index-nav{ width:100%; 位置:絶対マージン; -top:-60px;}
.index-nav ul{ list-style-type:none; margin:auto;width:60%; line-height:50px;}
.index-nav ul li{ float:left;パディング左:3.3%; パディング右:#FFF;} 342ace80ee25c5f444a2278efbad8016
6c04bd5ca3fcae76e30b72ad730ca86d class="index-all">
69ef323fd121e083db5828b66d31b33e
16b28748ea4df4d9c2150843fecfba68 ="背景">16b28748ea4df4d9c2150843fecfba68 7bd98a32cc5230ce6d08dfb5c12f1ffa 16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
.background{ width:100%;height:60px; background-color:#000;opacity:0.5; margin-top: -60px;}
ここに margin を追加します:-60px; を追加する必要がある理由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"/></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> 透明度を上げます
スタイル的には、index-all とはどういう意味ですか?