大一可能用到的使用HTML+CSS做成简单的静态网页

不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.!
我就做了一个简单的网页哈,一个仿小米首页的简单页面,没有任何的交互.
没有优化,做的不是很好,轻点喷

头部的html代码

    <!--*******头部导航栏模块 nav --><div class="nav"><!--头部导航栏模块左边  --><div class="nav_left w"><ul><li><a href="#"> 小米商城<span>|</span></a></li><li><a href="#"> MIUI<span>|</span></a></li><li><a href="#"> IoT<span>|</span></a></li><li><a href="#"> 云服务<span>|</span></a></li><li><a href="#"> 金融<span>|</span></a></li><li><a href="#"> 有品<span>|</span></a></li><li><a href="#"> 小爱开放平台<span>|</span></a></li><li><a href="#"> 企业团购<span>|</span></a></li><li><a href="#"> 资质证照<span>|</span></a></li><li><a href="#"> 协议规则<span>|</span></a></li><li><a href="#"> 下载app<span>|</span></a></li><li><a href="#"> Select Location</a></li></ul></div><!--头部导航栏模块右边  --><div class="nav_right"><div class="nav_right-land"><ul><li><a href="#">登录</a></li><li><a href="#">登录注册</a></li><li><a href="#">登录消息通知</a></li></ul></div><!-- 头部导航栏模块右边（购物车）  --><div class="nav_right-spc"><a href="#"> 购物车</a></div></div>

头部的css样式代码,这里引入了字体图标和对整个页面做了初始化

@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?3kff2d');src: url('fonts/icomoon.eot?3kff2d#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?3kff2d') format('truetype'), url('fonts/icomoon.woff?3kff2d') format('woff'), url('fonts/icomoon.svg?3kff2d#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}* {margin: 0;padding: 0;
}.w {width: 1226px;margin: 0 auto;
}li {list-style: none;
}a {text-decoration: none;
}input, button {border: 0;outline: 0;
}`/* 头部导航栏模块 nav (整） */.nav {height: 40px;background-color: #333333;
}/* 头部导航栏模块左边  */.nav_left li {float: left;
}.nav_left li a {float: left;font-size: 12px;line-height: 40px;color: #aeacaa;
}.nav_left span {margin: 0 10px;color: #aeaca0e8;
}.nav_left li a:hover {color: #fff;
}/* 头部导航栏模块右边（登陆）  */.nav_right-land {float: left;margin-left: 180px;height: 40px;line-height: 40px;
}.nav_right-land li {float: left;
}.nav_right-land li a {float: left;color: #aeacaa;margin: 0 8px;font-size: 12px;
}/* 头部导航栏模块右边（购物车） */.nav_right-spc {font-family: 'icomoon';float: left;width: 70px;height: 40px;line-height: 40px;margin-left: 2px;background-color: rgba(176, 184, 176, 0.4);
}.nav_right-spc a {font-size: 12px;margin-left: 9px;color: #aeaca0e8;
}.nav_right-spc:hover {background-color: #ff6700;
}.nav_right li a:hover {color: #fff;
}
主体部分代码```html<!--*******主体部分模块 home --><div class="home w"><!-- 主体部分模块 home logo导航栏 --><div class="home-logo"></div><!-- 主体部分模块 home ul内容 --><div class="home-text"><ul><li><a href="#">小米手机</a></li><li><a href="#">Redmi </a></li><li><a href="#">红米电视</a></li><li><a href="#">笔记本</a></li><li><a href="#">家电</a></li><li><a href="#">路由器</a></li><li><a href="#">智能硬件</a></li><li><a href="#">服务</a></li><li><a href="#">社区</a></li></ul></div><!-- 主体部分模块 home 搜索框 --><div class="home-bar"><input type="text"><a href="#"></a></div></div><!--*******主体内容模块 home-main--><div class="home-main w"><!--主体内容模块背景 --><div class="home-main_img"><div class="home-main_top"><ul><li><a href="#">手机 电话卡</a><i>></i></li><li><a href="#">电视 盒子</a><i>></i></li><li><a href="#">笔记本 平板</a><i>></i></li><li><a href="#">家电 插线板</a><i>></i></li><li><a href="#">出行 穿戴</a><i>></i></li><li><a href="#">智能 路由器</a><i>></i></li><li><a href="#">电源 配件</a><i>></i></li><li><a href="#">健康 儿童</a><i>></i></li><li><a href="#">耳机 音箱</a><i>></i></li><li><a href="#">生活 箱包</a><i>></i></li></ul></div></div><!--主体内容模块 底部  --><div class="home-main_foot"><div class="home-main_foot-left"><ul><li><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li><li><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li><li><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li><li class="q1"><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li><li class="q1"><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li><li class="q1"><img src="./images/pic1.png" alt=""><a href="#"> 小米秒杀</a></li></ul></div><div class="home-main_foot-right"><ul><li> <a href=""><img src="./images/nav-1.jpg" alt=""></a></li><li> <a href=""><img src="./images/nav-2.jpg" alt=""></a></li><li> <a href=""><img src="./images/nav-3.jpg" alt=""></a></li></ul></div></div></div>

这是主体的css

/* 主体部分模块 home(整体） */.home {position: relative;height: 100px;/* background-color: #0a0; */
}/* 主体部分模块 home logo导航栏 */.home-logo {float: left;position: absolute;width: 56px;height: 56px;top: 50%;margin-top: -28px;background-image: url(./images/mi-logo.png);background-color: #ff6700;
}/* 主体部分模块 home ul内容  */.home-text {float: left;margin-left: 180px;
}.home-text li {float: left;line-height: 100px;margin: 0 12px;
}.home-text li a {color: #767676;
}.home-text li a:hover {color: #ff6700;
}/* 主体部分模块 home 搜索框 */.home-bar {position: absolute;width: 300px;height: 50px;right: 0;/* top: 50%; */margin-top: 25px;border: 0 solid #767676;
}.home-bar input {float: left;width: 245px;height: 48px;border: 1px solid #767676;border-right: 0;
}.home-bar a {font-family: 'icomoon';float: left;width: 52px;height: 48px;line-height: 48px;text-align: center;border: 1px solid #767676;background: #ffffff;/* box-sizing: content-box; */
}.home-bar a:hover {background-color: #ff6700;
}/* 主体内容模块（整个） */.home-main {/* float: left; */height: 645px;/* background-color: tomato; */
}/* 主体内容模块背景 */.home-main_img {background-image: url(./images/banner.webp);
}/* 主体内容模块背景（ul部分) */.home-main_top {height: 450px;/* background-color: #0af; */
}.home-main_top ul {width: 234px;height: 460px;/* padding-right: 20px; */background-color: #a5a9aeaf;
}.home-main_top li a {float: left;font-size: 14px;margin-left: 20px;color: #f2f6eb;
}.home-main_top li {height: 43px;line-height: 43px;/* margin-top: 26px; */
}.home-main_top i {float: right;margin-right: 20px;font-family: "宋体";color: #f2f6eb;text-decoration: 900;font-style: normal;
}.home-main_top li:hover {background-color: tomato;
}/* 主体内容模块 底部  */.home-main_foot {height: 170px;margin-top: 15px;/* background-color: #0cb; */
}/* 主体内容模块 底部左边 */.home-main_foot-left {float: left;width: 234px;height: 170px;background-color: #5f5750;
}.home-main_foot-left li {position: relative;float: left;width: 77px;height: 85px;line-height: 85px;border-right: 1px solid #625a53;border-bottom: 1px solid #625a53;
}.home-main_foot-left li.q1 {border-bottom: 0px;
}.home-main_foot-left img {position: absolute;width: 30px;height: 30px;top: 50%;left: 50%;margin-left: -15px;margin-top: -26px;
}.home-main_foot-left a {position: absolute;font-size: 12px;margin-top: 5px;top: 20px;left: 16px;color: #ffffff;
}/* 主体内容模块 底部右边 */.home-main_foot-right {float: left;width: 990px;height: 170px;/* margin-left: 16px; *//* background-color: #0a0; */
}.home-main_foot-right li {float: left;
}.home-main_foot-right li a {/* float: left; */width: 316px;height: 170px;margin-left: 14px;/* background: url(./images/nav-1.jpg) no-repeat ; *//* background-color: #fff; */
}.home-main_foot-right img {width: 316px;height: 170px;
}

我要下课了,回去睡觉了,我直接全部上了,自己看看吧

  <!--*******主体内容模块底部 home-foot--><div class="home-foot"><!-- 主体内容模块底部导航栏 --><div class="home-foot_nov w"><p>小米采购</p><span class="d1">&gt</span><span class="d2">&lt</span></div><!-- 主体内容模块底部内容 (中间)--><div class="home-foot_content w"><ul><!-- 主体内容模块底部内容(中间)左 --><li class="left"><p>14:00</p><i></i></li><!-- 主体内容模块底部内容(中间)右 --><li><a href="#"><img src="./images/pro_1.jpg" alt=""><h4>小米头戴式耳机 黑香槟金</h4><p>一样的音乐，不一样的享受</p><p class="money"><span class="price">699.00</span><del>899.00</del></p></a></li><li><a href="#"><img src="./images/pro_1.jpg" alt=""><h4>小米头戴式耳机 黑香槟金</h4><p>一样的音乐，不一样的享受</p><p class="money"><span class="price">699.00</span><del>899.00</del></p></a></li><li><a href="#"><img src="./images/pro_1.jpg" alt=""><h4>小米头戴式耳机 黑香槟金</h4><p>一样的音乐，不一样的享受</p><p class="money"><span class="price">699.00</span><del>899.00</del></p></a></li><li class="t1"><a href="#"><img src="./images/pro_1.jpg" alt=""><h4>小米头戴式耳机 黑香槟金</h4><p>一样的音乐，不一样的享受</p><p class="money"><span class="price">699.00</span><del>899.00</del></p></a></li></ul><!-- 主体内容模块底部内容 (底部)--><div class="tp w"><img src="./images/banner2.webp" alt=""></div></div></div><!--*******尾部模块模块 footer --><div class="footer w"><!-- 尾部模块模块 footer 导航栏部分 --><div class="footer-nav"><ul><li><h3>预约维修服务</h3></li><li><h3>预约维修服务</h3></li><li><h3>预约维修服务</h3></li><li><h3>预约维修服务</h3></li><li><h3 class="t2">预约维修服务</h3></li></ul></div><!-- 尾部模块模块 footer 内容部分 --><div class="footer-bottom"><!-- 尾部模块模块 footer 内容部分(左) --><div class="footer-bottom_left"><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>帮助中心</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl></div><!-- 尾部模块模块 footer 内容部分(右) --><div class="footer-bottom_righy"><p>400-100-5678</p><span>周一至周日 8:00-18:00<p class="p1">（仅收市话费）</p></span><a href="#">人工客服</a></div></div></div>

/* 主体内容模块底部导航栏  */.home-foot_nov {/* float: left; */height: 60px;/* background-color: #0cb; */
}.home-foot_nov p {float: left;line-height: 60px;color: #686868;font-size: 19px;
}.home-foot_nov span {float: right;width: 35px;height: 22px;display: block;/* line-height: 22px; */margin-top: 28px;background-color: #f5f5f5;
}.home-foot_nov span.d1 {border: 1px solid #a6bed7;color: #a6bed7;text-align: center;font-family: "宋体";font-weight: 900;
}.home-foot_nov span.d2 {border: 1px solid #a6bed7;border-right: 0;color: #a6bed7;text-align: center;font-weight: 900;font-family: "宋体";
}/* 主体内容模块底部内容(中间) */.home-foot_content {height: 340px;/* overflow: hidden; *//* background-color: #b00; */
}.home-foot_content li {float: left;width: 235px;height: 340px;margin-right: 12px;background-color: #ffffff;
}/* 主体内容模块底部内容(中间)左 */.home-foot_content .left {font-family: 'icomoon';/* line-height: 340px;font-size: 20px; */text-align: center;color: #e53934;
}.home-foot_content .left p {/* line-height: 340px; */font-size: 25px;margin-top: 50px;color: #e53934;
}.home-foot_content .left i {font-style: normal;font-size: 25px;margin-top: 50px;color: #e53934;
}.home-foot_content li.left {width: 235px;height: 340px;background-color: #f1eded;border-top: 1px solid #e96e6c;
}/* 主体内容模块底部内容(中间)右 */.home-foot_content li a {float: left;text-align: center;font-size: 17px;color: #767676;
}.home-foot_content li img {width: 235px;height: 200px;
}.home-foot_content h4 {font-weight: 400;
}.home-foot_content li a:hover {color: tomato;
}.home-foot_content li p {font-size: 13px;color: #aaaaaa;margin-top: 12px;margin-bottom: 34px;
}.home-foot_content .moner {font-size: 12px;
}.home-foot_content .price {color: tomato;
}.home-foot_content .t1 {margin-right: 0;
}/* .主体内容模块底部内容 (底部) */.home-foot .tp img {/* overflow: hidden; */float: left;height: 120px;margin: 10px 0;/* background-color: #0a0; */
}/* .footer {height: 500px;background-color: #0c0;
} *//* 尾部模块模块 footer 导航栏部分 */.footer-nav {height: 80px;border-bottom: 1px solid #bab8b8;
}.footer-nav h3 {float: left;width: 244px;height: 25px;margin: 32px 0;font-size: 18px;text-align: center;font-weight: 400;background-color: #fff;color: #666666;border-right: 1px solid #cac6c6;
}.footer-nav h3.t2 {border-right: 0;
}/* 尾部模块模块 footer 内容部分 */.footer-bottom dl {float: left;margin-top: 30px;margin-right: 100px;
}.footer-bottom dt {font-size: 15px;color: #666;margin-bottom: 30px;
}.footer-bottom a {font-size: 12px;color: #666;margin-bottom: 12px;
}/* 尾部模块模块 footer 内容部分(右) */.footer-bottom_righy {float: right;width: 260px;height: 115px;margin-top: 40px;text-align: center;font-size: 14px;/* background: #a00; */color: #9d7675;border-left: 1px solid #cac6c6;
}.footer-bottom_righy p {font-size: 16px;color: tomato;margin-top: 5px;margin-bottom: 15px;
}.footer-bottom_righy .p1 {font-size: 12px;color: #9d7675;
}.footer-bottom_righy a {display: block;margin-top: 25px;margin-left: 72px;width: 120px;height: 30px;line-height: 30px;color: tomato;border: 1px solid tomato;
}

大一可能用到的使用HTML+CSS做成简单的静态网页相关推荐

用html和css构建简单的静态网页
目录一.效果展示 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.经典语录二.具体实现 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.简单语录三.主要问题四.总结只用h ...
大熊猫学生网页设计模板静态HTML动物保护学生网页作业成品 DIV CSS大熊猫野生动物主题静态网页
网页介绍本学生网页主题为介绍大熊猫形态特征.栖息环境.生活习性等,采用DIV CSS布局,共4个页面. 样式方面整体网页内容区宽度为1200PX,使用CSS设置了网页背景图,导航部分制作了鼠标经过及 ...
利用Html与css从零开始制作基础静态网页(web课设）
首先打好单个网页的基础结构本次我们制作网页主要使用的是外部样式表本次静态网页的主题是合金装备(由个人喜好而定,你可以根据其自己修改) 先定义外部样式表 <link rel="sty ...
HTML+CSS个人博客静态网页设计 (大一学生web实训作业)
静态网页制作作业_HTML CSS复习之制作静态网页
这一周我先是复习了一些基础的布局,下面是比较常用的几种基本布局: 左边aside部分左浮动,右边content部分也左浮动,两个部分无空隙左边aside部分左浮动,右边content部分右浮动然后 ...
HTML+CSS一个简单的电影网页制作作业，学生个人html静态网页制作成品代码, html电影速递网
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
HTML5+CSS期末大作业：个人博客网站设计——个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计简单的静态网页制作
HTML5+CSS期末大作业:个人主页/个人介绍网站设计--个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. 美食. 公 ...
HTML+CSS制作简单的家乡网页 ——我的家乡介绍广东 web前端期末大作业
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

大一可能用到的使用HTML+CSS做成简单的静态网页

大一可能用到的使用HTML+CSS做成简单的静态网页

大一可能用到的使用HTML+CSS做成简单的静态网页相关推荐

最新文章

热门文章