如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)

如何用html写一个电商网页主页

前言

目前我还在学习这个初阶段,如果有错误的地方或者没有做好的地方,还请诸位大佬指正,我会虚心学习,多谢了

正文

里面的东西
后面我会详细讲解内容

ps

这里是html代码
效果图

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>电商</title><link rel="stylesheet" type="text/css" href="css/电商(新).css" /><script type="text/javascript">var tet= document.getElementById("text");var butt= document.getElementById("btn");var tet_li= document.getElementById("text_li");butt.onclick = function msg(){}</script></head><body><header><p><h1>欢迎光临林轩淘网</h1></p>  </header>
<section><div id="main" class="p1">
<div id="main1"><ul><li><a href="手机导航.html">手机导航</a><div class="p2"><dl><dd>  <a href="手机导航.html">小米</a></dd><dd><a href="#">苹果</a></dd><dd><a href="#"> 三星</a></dd><dd><a href="#">vivo</a></dd><dd><a href="#"> oppo</a></dd><dd><a href="#">一加(oneplus) </a></dd><dd>  <a href="#">夏普 </a></dd><dd><a href="#">黑鲨 </a></dd><dd><a href="#">华为 </a></dd>     </dl></div></li><li><a href="#">生鲜水果</a><div class="p2"><dl><dd><a href="#">水果</a></dd><dd><a href="#">虾蟹</a></dd><dd><a href="">牛排</a></dd><dd><a href="#">蛋类</a></dd><dd><a href=""> 蔬菜</a></dd> <dd> <a href="#">鱼类</a> </dd> <dd><a href="#">贝类</a> </dd> <dd><a href="#"> 禽肉</a></dd><dd><a href="#">牛羊肉</a> </dd> <dd><a href="#">猪肉</a> </dd><dd><a href="#">软体/滑体</a> </dd> <dd><a href="#"> 水产干货</a></dd> <dd><a href="#">素食.包邮</a> </dd> </dl></div></li><li><a href="#">美容护肤</a><div class="p2"><dl><dt><a href="#"> 美容护肤</a><dd><a href="#">面膜</a></dd><dd><a href="#">洗面奶</a></dd><dd><a href="#">面部护理</a></dd><dd><a href="#">功效护理</a> </dd>   <dd><a href="#">秋冬护理</a> </dd> <dd> <a href="#">身体护理</a></dd><dd> <a href="#">底妆</a></dd><dd><a href="#">修容定妆</a> </dd> <dd><a href="#"> 眉眼妆</a></dd> <dd><a href="#"> 唇妆</a></dd> <dd><a href="#">防晒</a> </dd> </dt></dl></div></li><li><a href="#">个人护理</a><div class="p2"><dl><dt><a href="#">沐浴用品</a><dd><a href="#">洗发水</a></dd><dd><a href="#">牙膏</a></dd><dd><a href="#">女性护理</a></dd><dd><a href="#">洗手护手</a> </dd> <dd><a href="#"> 个护工具</a></dd><dd><a href="#"> 染发造型</a></dd> <dd><a href="#">男士护理 </a></dd>    <dd><a href="#">护发素</a> </dd> <dd><a href="#"> 身体护理</a></dd> <dd><a href="#">足部护理 </a></dd>             <dd><a href="#">口腔美容</a> </dd>         <dd><a href="#">面部护理 </a></dd>         <dd><a href="#">电动牙刷</a> </dd> <dd><a href="#">中老年护理</a></dd>         </dt></dl></div></li><li><a href="#">方便速食&nbsp;</a><div class="p2"><dl><dt><a href="#">方便面</a><dd><a href="#"> 自热火锅</a></dd><dd><a href="#">自热米饭</a></dd><dd><a href="#">八宝粥</a></dd><dd><a href="#">熟食火腿</a> </dd> <dd> <a href="#">清香茗茶</a></dd> <dd><a href="#">进口速食 </a></dd> <dd><a href="#">南北干货 </a></dd><dd><a href="#">追剧小食</a> </dd> <dd> <a href="#">走亲访友</a></dd> <dd><a href="#">懒人必备</a> </dd><dd><a href="#">出游必备</a> </dd> </dt></dl></div></li></ul></div>
</div>
</section><div id="header"><div id="logo">
<!--           <img src="data:image/背景.png" height="103" width="159" alt="">--></div><div id="logain"><div id="bt"><p>账号:<input type="text"  value="massage"></p><p> </p></div><div id="bt2"><p> 密码:<input type="text"  value="password"></p></div><div id="left"><a href="登录.html">登录</a>        </div><div id="right"><a  href="注册界面.html">注册</a></div> </div><div id="dh"><ul class="header_ul"><li class="header_ul_con1"><a href="#">护肤</a><ul class="header_ul_ul"><li><a href="#">洁面</a></li><li><a  href="#">爽肤水</a></li><li><a href="#">乳液</a></li><li><a href="#">精华</a></li></ul></li><li class="header_ul_con2"><a href="#">彩妆</a><ul class="header_ul_ul"><li><a href="#"> bb霜</a></li><li><a href="#">卸妆</a></li><li><a href="#">粉底液</a></li></ul></li><li class="header_ul_con3"><a href="#">香氛</a><ul class="header_ul_ul"><li><a href="#">男士香水</a></li><li><a href="#">女士香水</a></li><li><a href="#">中性香水</a></li></ul><li class="header_ul_con4"><a href="#">男士专区</a><ul class="header_ul_ul"><li><a href="#">洁面</a></li><li><a href="#">洗面奶</a></li><li><a href="#">面霜</a></li></ul></li></li></ul></div><!--<div id="mas01"><img src="img/功效.jpg" width="300" height="300" alt=""> </div><div id="msa02"><img src="img/详情.jpg" width="300" height="300" alt=""> </div><div id="msa03"><img src="img/洗面奶.jpg" width="300" height="300" alt="">    </div><div id="msa04"><img src="img/洗面奶2.jpg" width="300" height="300" alt="">   </div></div>
--><form   ><input type="text" id="search"  value="请输入你想搜索的目标">      </form>
<div id="search2">
<a href="index.html"> <img src="data:image/搜索.jpg" height="30" width="40" alt=""></a>
</div><div id="add"><div id="txt"><textarea  id="text" value="" cols="25" rows="10"></textarea><br><button type="button" id="btn">评论留言</button><div id="lis"><ol id="text_li"></ol></div></div><div id="留言区"><script type="text/javascript">var tet= document.getElementById("text");var butt= document.getElementById("btn");var tet_li= document.getElementById("text_li");butt.onclick=function msg(){var Li= document.createElement("li");Li.innerHTML= tet.value;Text_li.appendChild(Li);}</script></div></div><!-- 里面有一个轮播区域 --><div id="homepage"><!-- 轮播的内容 --><div class="carousel-content"><img src="data:image/0dbc87a247142ce04014c83b673a2944.png" width="700" height="360" alt="" /><img src="data:image/eb2e1c1b6bef01a28cebf31dd153187e.png" width="700" height="360" alt="" /><img src="data:image/米103.jpeg" width="700" height="360" alt="" /><img src="data:image/米101.jpeg" width="700"   height="360" alt="" /></div></div><footer><div id="演示"><a href="video.html">个人演示界面</a>
<!--        <img src="img/妮维雅洗面奶.jpg" height="300px" width="300px">--></div><div id="about"><a href="about.html"> 关于我们</a></div><div id="donation"><a href="捐赠支持.html">捐赠支持商家</a></div><div id="更多">更多</div><div id="版权"><p>制作人 林轩办公室©</p></div> </footer>
</div></body></html>

-这里是css代码

@charset "utf-8";
/* CSS Document */body{/*    background:url("../96eef560c3871709372d2010822ace49.png");*/background-color:#B41114;background-repeat:repeat;font-family: 宋体;
}header{width: 1220px;height: 65px;margin: 0px auto;border: #000000 1px solid;background: url("../image/201910231837256857.jpg!cc0.cn.jpg");text-align: center; }footer{width: 1220px;height: 65px;margin: 0px auto;border: #000000 1px solid;}ul,ol{list-style-type: none;}                      a{list-style-type: none;}.p1{width: 1220px;height: 600px;}.p1 #main1{width: 13%;height: 590px;margin: 5px auto;border: red solid 1px;position: absolute;left: 149px;
/*                opacity: 0.5;*/z-index:10;
/*                overflow: hidden;*/}.p1:after{content: ".";display: flex;clear: both;}a{text-decoration: none;color: #000000;}#main #main1{font-weight: bold;color: #FFFFFF;background: #DDDDDD;line-height: 60px;}#main #main1 .p2{display:none;width: 400px;height: 360px;border: #0000FF 1px solid;background: royalblue;color: white;font-size: 16px;line-height: 30px;}#main{position: relative;}#main #main1 li:hover .p2{display: block;right: -404px;top: 0;position: absolute;}
#main #main1 a:hover .p2{display: block;right: -404px;top: 0;position: absolute;}#logain{ background:url("../image/login_bj.jpg");background-repeat: no-repeat;height:400px;width: 400px;position: absolute;left:1160px;top: 200px;}
#bt{height: 20px;width:150px;position: absolute;top: 60px;left: 10px;clear: left;}#bt2{height: 20px;width:170px;position: absolute;top: 100px;left: 10px;}
#left{width: 40px;height: 20px;border: 1px solid #E92327;position: absolute;    top: 168px;left:20px;  background: url("../image/login_btn.jpg");
}
#right{width: 40px;height: 20px;border: 1px solid #E92327;display: block;  top: 168px;position: absolute;left:120px;background: url("../image/login_btn.jpg");}
#add{height: 300px;width: 310px;position: absolute;top: 410px;left: 1160px;}
#演示{margin: 0px auto;position: absolute;left: 300px;
}
#about{position: absolute;left: 700px;}
#donation{position: absolute;left:900px;
}
#logo{ height: 152px;width: 740px;background-repeat:repeat-x;position: absolute;left:370px;top:185px;background: url("../image/背景.png");background-origin: 0.9;}
#main2{ height: 80px;width: 1220px;border: 1px solid #BB2D2F;margin-left: 405px;background: url("../樱花林.jpg");
}
#search{height:40px;width: 200px;position: absolute;left: 1165px;top:105px;background: url("../image/dh_new.jpg");background-origin: 0.4;
}
#search2{width: 200px;height: 300px;position: absolute;left: 1325px;top:113px;background-origin: 0.9;
}
#jpg{ height: 40px;width: 40px;position: absolute;left:1010px;top:3px;}
#版权{position: absolute;left: 700px;
top:700px;}
#更多{ position:absolute;left: 1210px;}.header_ul {float: left;position: absolute;left: 325px;list-style: none;top: 68px;width:790px;height: 74px;background:url("../image/ad3.jpg");
}.header_ul li {margin-top: 26px;margin-left: 150px;float: left;
}.header_ul li:hover {color: red;
}/*二级菜单*/.header_ul_ul {width: 100px;text-align: left;position: absolute;list-style: none;background-color: aqua;color: black;opacity:0.5;
}.header_ul_ul li {margin: 1px 10px 10px 20px;float: none;
}.header_ul_con1 .header_ul_ul {display: none;
}.header_ul_con2 .header_ul_ul {display: none;
}.header_ul_con3 .header_ul_ul {display: none;
}.header_ul_con4 .header_ul_ul {display: none;
}.header_ul_con1:hover .header_ul_ul {display: block;
}.header_ul_con2:hover .header_ul_ul {display: block;
}.header_ul_con3:hover .header_ul_ul {display: block;
}.header_ul_con4:hover .header_ul_ul {display: block;
}#homepage {overflow:visible;
/*    display: none;*/
}.carousel-content img{float: left;overflow: hidden;
/*                display: block;*/
}
#homepage,.carousel-content{animation-play-state:paused;}
/*
@keyframes cc{0%{}25%{transform: translateX(0px)}50%{transform:translateX(-700px)}75%{transform: translateX(-1400px)}100%{transform: translateX(-2100px)}}*//* 轮播内容的集合 */
@keyframes cc{/*0%{ transform: 0px;}25%{margin-left:-0px; }50%{margin-left: -700px;}75%{margin-left: -1400px;}100%{margin-left: -2100px;}
*/from{left:20%  }to{ letf:100%}} .carousel-content{width: 700px;height: 300px;display:flex;float: left;overflow:hidden;position: absolute;top:350px;left: 400px;animation: 4s cc  infinite;
/*    transform-style: flat;*/
}/* 轮播区域 *//* keyframes规则 */
/*@keyframes playMovie {0% {transform:0px;}10% {margin-left:0px;}20% {margin-left:-600px;}40% {margin-left:-600px;}50% {margin-left:-1200px;}70% {margin-left:-1200px;}80% {margin-left:-1800px;}90% {margin-left:-1800px;}100% {margin-left:-2400px;}}
*//* 轮播内容的集合 */

如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)相关推荐

如何一步一步用DDD设计一个电商网站（十三）—— 领域事件扩展
本系列所有文章如何一步一步用DDD设计一个电商网站(一)-- 先理解核心概念如何一步一步用DDD设计一个电商网站(二)-- 项目架构如何一步一步用DDD设计一个电商网站(三)-- 初涉核心域如 ...
电商html轮播动效,制作一个电商网站的轮播图效果
各位亲爱的伙伴们大家周末愉快上次给大家写了给猫猫制作简单的轮播图收到了,小伙伴们一致吐槽,娜娜制作出来的这个轮播图不能动呀~.好吧说实话,那个本来就动不了.但是伙伴们的建议,我都收到了,那么今 ...
如何一步一步用DDD设计一个电商网站（七）—— 实现售价上下文
本系列所有文章如何一步一步用DDD设计一个电商网站(一)-- 先理解核心概念如何一步一步用DDD设计一个电商网站(二)-- 项目架构如何一步一步用DDD设计一个电商网站(三)-- 初涉核心域如 ...
做一个电商网站需要多少钱
做一个电商网站需要多少钱做一个电商网站详细成本一.域名费用:有些的顶级域名非常贵,但如果需要搭建一个好的商城,那么域名也要最好的,因此,域名的成本非常高. 二.服务器费用:电商每天处理大量的数据, ...
开发一个电商网站大概多少钱
开发一个电商网站会因为系统功能.开发商.硬件等因素影响电商网站开发报价.每一个影响电商网站开发费用的介绍,如下: 与功能需求有关电商平台开发费用需要知道所有的网站在建设出来之后都应该掌握好其功能才能 ...
给你一个电商网站，你如何测试？
当下软件测试主流方向是Web端和移动端应用,但无论是哪个端,多数都可以基于软件测试的六个方向来测试,即功能.性能.易用性.可靠性.兼容性.有效性这几个方面考虑.如果给你一个电商网站,你该如何测试?以下 ...
如何用C语言写出一个微信群聊机器人
要用 C 语言写出一个微信群聊机器人,您需要先了解微信群聊的相关信息和 C 语言的编程知识. 首先,微信群聊是通过微信服务器进行通信的,因此您需要了解如何通过网络协议与微信服务器进行通信.微信群聊使用 ...
开发一个商城需要多少钱做一个电商网站大概多少钱
首先要考虑做电脑版.微信版,还是做电脑版+手机版,或者要做APP,我们来分析一下这些差异. 只做电脑版:可采用成熟的方案如:ecshop(官网商业授权7800元,源代码开源),注意!这里只是授权费,不 ...
HTML+CSS 轮播图电商网站注册界面抽屉主页头部界面
[练习]HTML+CSS 作业要求1 京东首页轮播图,效果如下 jd轮播图 <!DOCTYPE html> <html lang="en"> <he ...

如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)

如何用html写一个电商网页主页

前言

正文

ps

如何用html+css写出一个电商网站大纲(后面会有每个部分讲解的博文)相关推荐

最新文章

热门文章