|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 fishhh03 于 2022-12-4 11:57 编辑
html5的链入式css完全显示不出来，会是什么问题呢，我用的是谷歌浏览器，已检查utf-8与相对路径绝对路径，真的一点都显示不出来，是为什么呢？
html5代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>本案例重点讲解如何制作电商网站首页</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<!--头部、导航及视频盒子开始-->
<div class="headerbox"></div>
<header>
<div class="con">
<section class="left"></section>
<section class="right">
<a href="#">登录</a>
<a href="#">注册</a>
</section>
</div>
</header>
<nav>
<ul>
<li class="left">
<a class="one" href="#">
<img src="images/sanxian.png" alt="">
<span>选项</span>
<img src="images/sanjiao.png" alt="">
</a>
<aside>
<span></span>
<ol class="zuo">
<li class="con">护肤</li>
<li>洁面</li>
<li>爽肤水</li>
<li>精华</li>
<li>乳液</li>
<li class="con">彩妆</li>
<li>BB霜</li>
<li>卸妆</li>
<li>粉底液</li>
<li class="con">香氛</li>
<li>女士香水</li>
<li>男士香水</li>
<li>中性香水</li>
</ol>
<ol class="you">
<li class="con">男士专区</li>
<li>爽肤水</li>
<li>洁面</li>
<li>面霜</li>
<li>精华</li>
<li class="con">热门搜索</li>
<li>洗面奶</li>
<li>去黑头</li>
<li>隔离</li>
<li>面膜</li>
</ol>
<img src="images/tu1.jpg" alt="">
</aside>
</li>
<li class="center">
<form>
<input type="text"value="请输入商品名称、品牌或编号">
</form>
</li>
<li class="right">
<a href="#"></a>
<a href="#"></a>
<a href="#">󰄪</a>
<a href="#"></a>
</li>
</ul>
</nav>
<video src="video/home_loop_720p.mp4" autoplay="true" loop="true"></video>
<audio src="audio/home.ogg" autoplay="true" loop="true"></audio>
<div class="pic">
<p>Select the right resolution for your PC and dive in!（请为你的电脑选择正确的分辨率）</p>
<ul>
<li class="one"><span></span>STANDARD标准</li>
<li class="two"><span></span>HD高清</li>
</ul>
</div>
</div>
<!--头部、导航及视频盒子结束-->
<!--内容部分（最新单品）盒子开始-->
<div class="newproduct">
<header>
<img src="images/new.jpg" alt="">
</header>
<p>补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜</p>
<ul>
<li>
<hgroup>
<h2>fresh skin 薏仁水</h2>
<h2>化妆水/爽肤水单品</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
<li>
<hgroup>
<h2>蜂蜜原液天然滋养</h2>
<h2>美白护肤套装</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
<li>
<hgroup>
<h2>纯情诱惑一抹惊艳</h2>
<h2>告别暗淡唇</h2>
<h2></h2>
<h2></h2>
</hgroup>
</li>
</ul>
</div>
<!--内容部分（最新单品）盒子结束-->
<!--内容部分（我要试装）盒子开始-->
<div class="trymakingup">
<header>
<img src="images/shizhuang.jpg" alt="">
</header>
<p>美化容貌 增添自信 突出个性</p>
<ul>
<li>
<img class="zheng" src="mages/try1.jpg" alt="">
<img class="fan" src="mages/try4.jpg" alt="">
</li>
<li>
<img class="zheng" src="mages/try2.jpg" alt="">
<img class="fan" src="mages/try5.jpg" alt="">
</li>
<li>
<img class="zheng" src="mages/try3.jpg" alt="">
<img class="fan" src="mages/try6.jpg" alt="">
</li>
</ul>
</div>
<!--内容部分（我要试装）盒子结束-->
<!--内容部分（测评中心）盒子开始-->
<div class="evaluation">
<header>
<img src="images/cp.jpg" alt="">
</header>
<p>测评 我们更专业 用户更放心</p>
<ul>
<li>
<img class="tu" src="images/cp1.jpg" alt="">
<img class="tihuan" src="images/th1.png" alt="">
</li>
<li>
<img class="tu" src="images/cp2.jpg" alt="">
<img class="tihuan" src="images/th2.png" alt="">
</li>
<li>
<img class="tu" src="images/cp3.jpg" alt="">
<img class="tihuan" src="images/th3.png" alt="">
</li>
<li>
<img class="tu" src="images/cp4.jpg" alt="">
<img class="tihuan" src="images/th4.png" alt="">
</li>
<li>
<img class="tu" src="images/cp5.jpg" alt="">
<img class="tihuan" src="images/th5.png" alt="">
</li>
<li>
<img class="tu" src="images/cp6.jpg" alt="">
<img class="tihuan" src="images/th6.png" alt="">
</li>
<li>
<img class="tu" src="images/cp7.jpg" alt="">
<img class="tihuan" src="images/th7.png" alt="">
</li>
<li>
<img class="tu" src="images/cp8.jpg" alt="">
<img class="tihuan" src="images/th8.png" alt="">
</li>
</ul>
</div>
<!--内容部分（测评中心）盒子结束-->
<!--脚部（信息注册）盒子开始-->
<footer>
<div class="logo"></div>
<div class="message">
<form>
<ul class="left">
<li>
<p><label for="">姓名:</label></p>
<input type="text">
</li>
<li>
<p>邮箱：</p>
<input type="email">
</li>
<li>
<p>电话：</p>
<input type="tel" pattern="^\d{11}$" title="请输入11位数字">
</li>
<li>
<p>密码：</p>
<input type="password">
</li>
<li>
<input class="but" type="submit" value="">
</li>
</ul>
<div class="right">
<p>留言:</p>
<textarea></textarea>
</div>
</form>
</div>
</footer>
<!--脚部（信息注册）盒子结束-->
<!--版权盒子开始-->
<div>
<a href="#">fresh skin美肤科技公司</a>
</div>
<!--版权盒子结束-->
</body>
</html>
css代码如下：
/*重置浏览器的默认样式*/
body,ul li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img{
margin:0;
padding:0;
border:0;
list-style:none;
}
/*全局控制*/
body{
font-family:"微软雅黑",Arial,Helvetica,sans-serif;
font-size:14px;
}
/*未单击和单击后的样式*/
a:link,a:visited{
color:#999;
text-decoration:none;
}
/*鼠标移上时的样式*/
a:hover{
color:#fff;
}
input,textarea{
outline:none;
}
@font-face{
font-family:'freshskin';
src:url('../fonts/icoonfont.ttf');
}
/*头部、导航及视频盒子样式（headerbox）开始*/
.headerbox{
width:100%;
height:680px;
overflow:hidden;
position:relative;
}
.headerbox video{
width:100%;
min-width:1200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.headerbox header{
width:100%;
height:40px;
background:#333;
z-index:999;
position:absolute;
}
.headerbox header .con{
width:1030px;
height:40px;
margin:0 auto;
}
.headerbox header .left{
width:75px;
height:20px;
background:url(../images/logo.png) 0 0 no-repeat;
margin-top:10px;
float:left;
}
.headerbox header .right{
margin-top:10px;
float: right;
}
.headerbox header .right a{margin-right:10px;
.headerbox nav{
width:100%;
height:90px;
background:rgba(0,0,0,0.2);
z-index:1000;
position:absolute;
top:40px;
border-bottom:1px solid #fff;
}
.headerbox nav ul{
width:1030px;
height:90px;
margin:0 auto;
position: relative;
}
.headerbox nav ul li{
float:left;
margin=right:19%；
}
.headerbox nav ul .left:hover aside{display:block;}
.headerbox nav ul .left a{
display:block;
height:90px;
line-height:90px;
font-size:20px;
color:#fff;
}
.headerbox nav ul .left a img{vertical-align:middle;}
.herderbox nav ul .left a span{margin:0 10px;}
.headerbox aside{
display:none;
width:380px;
height:560px;
background:rgba(0,0,0,0.3);
position:absolute;
left:0;
top:90px;
z-index:1500;
color:#fff;
}
.headerbox aside span{
width:20px;
height:14px;
background:url(../images/liebiao.png) 00 no-repeat;
position:absollute;
left:50px;
top:0;
}
.headerbox aside ol{
width:155px;
float:left;
}
.headerbox aside ol li{
width:1555px;
height:25px;
line-height:25px;
cursor:pointer;
font-family:"宋体";
}
.headerbox aside ol li.con{
font-size:16px;
text-indent:0;
font-family:"微软雅黑";
padding:10px 0;
}
.headerbox aside ol li:hover{color:#fff;}
.headerbox aside .zuo{margin:35px 0 0 68px;}
.headerbox aside .you{margin-top:35px;}
.headerbox aside img{margin:10px 0013px;}
.headerbox nav ul .center{margin-top:32px;}
.headerbox nav ul .center input{
width:240px;
height:30px;
border:1px solid #fff;
border-radius:15px;
color:#fff;
line-height:32px;
background:rgba(0,0,0,0);
padding-left:30px;
box-sizing:border-box;
background:url(../images/search.png) no-repeat 3px 3px;
outline:none;
}
.headerbox nav ul .right{
margin-top:32px;
width:280px;
height:32px;
margin-right:0;
text-align:center;
line-height:32px;
font-size:16px;
font-family:"freshskin";
}
.headerbox nav ul .right a{
display:inline-block;
width:32px;
height:32px;
color:#fff;
box-shadow:0 0 0 1px #fff inset;
transition:box-shadow 0.3s ease 0s;
border-radius:16px;
margin-left:30px;
}
.headerbox nav ul .right a:hover{
box-shadow:0 0 0 16px #fff inset;
color:#C1DCC5;
}
.headerbox .pic{
width:570px;
height:210px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:url(../images/wenzi.png) no-repeat;
text-align:center;
}
.headerbox .pic p{
margin-top:240px;
color:#4c8174;
}
.headerbox .pic ul{
position:absolute;
color:#999;
}
.headerbox .pic ul li{
width:180px;
height:56px;
border-radius:28px;
background:#fff;
text-align:left;
}
.headerbox .pic ul .one{
line-height:56px;
position:absolute;
left:-1920px;
top:40px;
opacity:0;
transition:all 2s ease-in 0s;
}
.headerbox .pic ul .two{
line-height:56px;
position:absolute;
left:1920px;
top:40px;
opacity:0;
transition:all 2s ease-in 0s;
}
body:hover .headerbox .pic ul .one{
position:absolute;
left:100px;
top:40px;
opacity:0.8;
}
body:hover .headerbox .pic ul .two{
position:absolute;
left:300px;
top:40px;
opacity:0.8;
}
.headerbox .pic ul .one span,.headerbox .pic ul .two span{
float:left;
width:40px;
height:40px;
text-align:center;
line-height:40px;
border-radius:20px;
margin:8px 10px 0 10px;
box-shadow:0 0 0 1px #90c197 inset;
transition:box-shadow 0.3sease 0s;
font-weight:bold;
color:#90c197;
font-family:"freshskin";
}
.headerbox .pic ul .twospan{margin:8px 30px 0 10px;}
.headerbox .pic ul .one:hover span,.headerbox .pic ul .two:hover span{
box-shadow:0 0 0 20px #90c187 inset;
color:#fff;
}
/*头部、导航及视频盒子样式（headerbox）结束*/
/*内容部分（最新单品）盒子样式（newproduct）开始*/
.newproduct{
width:100%;
height:530px;
background:#fff;
}
.newproduct header{
width:385px;
heighr:95px;
background:#f7f7f7;
border-radius:48px;
margin:70px auto 0;
box-sizing:border-bos;
padding:2px 0 0 35px;
}
.newproduct p{
margin-top:10px;
text-align:center;
color:db0067;
}
.newproduct ul{ margin:70px auto 0; width:960px;}
.newproduct ul li {
width:266px;
height:250px;
border:1px solid #ccc;
background:url(../images/pic1.jpg)0 0 no-repeat;
float:left;
margin-right:8%;
margin-bottom:40px;
position:relative;
overflow:hidden;
}
.newproduct ul li:nth-child(2){background-image:url(../images/pic2.jpg);}
.newproduct ul li:nth-child(3){
margin-right:0;
background-image:url(../images/pic3.jpg);
}
.newproduct ul li hgroup{
position:absolute;
left:0;
top:-250px;
width:266px;
height:250px;
background:rgba(0,0,0,0.5);
transition:all 0.5s ease-in 0s;
}
.newproduct ul li:hover hgroup{ position:absolute;left:0; top:0;}
.newproduct ul li hgroup h2:nth-child(1){
font-size:22px;
text-align:center;
color:#fff;
font-weight:normal;
margin-top:58px;
}
.newproduct ul li hgroup h2:nth-child(2){
font-size:14px;
text-align:center;
color:#fff;
font-weight:normal;
margin-top:15px;
}
.newproduct ul li hgroup h2:nth-child(3){
width:26px;
height:26px;
margin-left:120px;
margin-top:15px;
background:url(../images/jiantou.png) 0 0 no-repeat;
}
.newproduct ul li hgroup h2:nth-child(4){
width:75px;
height:22px;
margin-left:95px;
margin-top:25px;
background:url(../images/anniu.png) 0 0 no-repeat;
}
/*部分内容（最新单品）盒子样式（newproduct）结束*/
/*内容部分（试妆）盒子样式（trymakingup）开始*/
.trymakingup{
width:100%;
height:312px;
background:#83ba8b;
padding-top:70px;
}
.trymakingup header{
width:555px;
height:95px;
background:#f7f7f7;
border-radius:48px;
margin:0 auto;
box-sizing:border-box;
padding:7px 0 0 35px;
}
.trymakingup p{
margin-top:10px;
text-align:center;
color:#fff;
}
.trymakingup ul{
margin:70px auto 0;
width:960px;
}
.trymakingup ul li{
width:291px;
height:251px;
float:left;
margin-right:4%;
margin-bottom:40px;
position:relative;
-webkit-perspective:230px;
}
.trymakingup ul li:last-child{
margin-right:0;
}
.trymakingup ul li img{
position:absolute;
left:0;
top:0;
-webkit-backface-visibility:hidden;
transition:all 0.5s ease-in 0s;
}
.trymakingup ul li img .fan{
-webkit-transform:rotateX(-180deg);
}
.trymakingup ul li:hover img .fan{
-webkit-transform:rotateX(0deg);
}
.trymakingup ul li img .zheng{
-webkit-transform:rotateX(180deg);
}
/*内容部分（试妆）盒子样式（trymakingup）结束*/
/*内容部分（测评）盒子样式（evaluation）开始*/
.evaluation{
width:100%;
height:700px;
background:#fff;
}
.evaluation header{
width:508px;
height:95px;
background:#f7f7f7;
border-radius:48px;
margin:220px auto 0;
box-sizing:border-box;
padding:7px 0 0 35px;
}
.evaluation p{
margin-top:10px;
text-align:center;
color:#db0067;
}
.evaluation ul{
margin:70px auto 0;
width:960px;
}
.evaluation ul li{
width:195px;
height:195px;
border:1px solod #ccc;
border-radius:50%;
float:left;
margin-right:5%;
margin-bottom:40px;
position:relative;
}
.evaluation ul li img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.evaluation ul li:nth-child(4),.evaluation ul li:nth-child(8){
margin-right:0;
}
.evaluation ul li .tihuan{
opacity:0;
transition:all 0.4s ease-in 0.2s;
}
.evaluation ul li:hover .tihuan{
opacity:1;
transform:translate(-50%,-50%) scale(0.75);
}
.evaluation li.tu{
transition:all 0/4s ease-in 0s;
}
.evaluation ul li:hover .tu{
opacity:0;
transform:translate(-50%,-50%) scale(0.5);
}
/*内容部分（测评）盒子样式（evaluation）结束*/
/*脚部（Logo和信息注册）盒子样式开始*/
footer{
width:100%;
height:400px;
background:#545861;
border-bottom:1px solid #fff;
}
footer .logo{
width:1000px;
height:100px;
margin:0 auto;
background:url(../images/logo1.png) no-repeat center center;
border-bottom:1px solid #8c9299;
}
footer .message{
width:1000px;
margin:20px auto 0;
color:#fffada;
}
footer .message .left{
width:525px;
float:left;
padding-left:30px;
box-sizing:border-box;
}
footer .message.left li{
float:left;
margin-right:30px;
}
footer .message .left li input{
width:215px;
height:32px;
border-radius:5px;
margin:10px 0 15px 0;
padding-left:10px;
box-sizing:border-box;
border:none;
}
footer .message .left li:last-child input{
width:120px;
height:39px;
padding-left:0;
border:none;
background:url(../images/but.jpg) no-repeat;
}
footer.message .right{
float:left;
}
footer .message .right p{
margin-bottom:10px;
}
footer .message .right textarea{
width:400px;
height:172px;
padding:10px;
box-sizing:border-box;
resize:none;
}
/*脚部（Logo和信息注册）盒子样式结束*/
/*版权信息盒子样式（copyright）开始*/
.copyright{
width:100%;
height:60px;
background:#333333;
text-align:center;
}
.copyright a{line-height:60px;}
/*版权信息盒子样式（copyright）结束*/
本帖最后由 傻眼貓咪 于 2022-12-4 14:41 编辑
我试了，我的显示出来啊。（部分不能显示，其他图像png档之类的显示不能）
路径对吗？
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2022-12-4 11:49:14
置顶卡
千斤顶
显身卡
楼主