【回顾整理】HTML+CSS个的两个实战项目
一：麦子商城首页制作
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="ytf-8">
<title>html+css</title>
<link rel="stylesheet" href="css/style.css"/> <!--link style="text/css"-->
</head>
<body>
<a name="toppp"></a>
<div class="top"> <div class="black">
<div class="core">
<div class="l">
<span><a href="">设为首页</a></span>
<span><a href="">收藏本站</a></span>
<!-- <span class="r">2015/9/1</span> 若把日期放这里，会到收藏本站的右边，可能是因为父元素l的影响，所以需要单独div-->
</div>
<div class="r">
<span class="dw">2015/9/1 风和日丽</span>
</div>
</div>
</div> <div class="logos">
<div class="core">
<div class="logos l">
<h1><a href="index.html"><img src="data:images/logo.jpg" alt="HTML+CSS实战"/></a></h1>
</div> <div class="search l">
<form action="index.html" method="get">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="s_z"></td>
<td class="s_c">
<input type="text" name="text" id="s_c_txt"/>
</td>
<td class="s_y">
<button type="submit" name="submit"></button>
</td>
</tr>
</table>
</form>
<!-- <h1 class="s_z l"><a href="index.html"><img src="data:images/s_z.jpg" alt="HTML+CSS实战"/></a></h1>
<h1 class="s_c l"><a href="index.html"><img src="data:images/s_c.jpg" alt="HTML+CSS实战"/></a></h1>
<h1 class="s_y l"><a href="index.html"><img src="data:images/s_r.jpg" alt="HTML+CSS实战"/></a></h1> -->
</div> <div class="phone r">
<span>客服热线：400-000-000</span>
</div> </div>
</div> </div>
<!--
<div class="nav">
<div class="core"> </div> </div>
--> <div class="nav">
<div class="core">
<ul>
<li class="a"><a href="index.html">网站首页</a></li>
<li><a href="index.html">公司简介</a></li>
<li><a href="index.html">业务描述</a></li>
<li><a href="index.html">服务范围</a></li>
<li><a href="index.html">产品中心</a></li>
<li><a href="index.html">人才管理</a></li>
<li><a href="index.html">在线留言</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
</div>
</div> <!--中间部分--> <div class="middle">
<div class ="core">
<div class="ad">
<img alt="广告" src="data:images/ad.jpg"/>
</div> <div class="cont l">
<div class="tit">
<img alt="intro" src="data:images/jianjie.jpg"/>
<span>more</span>
</div>
<div class="jj_c">
<img alt="" src="data:images/jianjie_img.jpg"/>
<p>
麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
</p>
<p>
什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！
</p>
<p>
那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。
</p>
</div>
</div> <div class="news l">
<div class="tit">
<img alt="intro" src="data:images/xinwen.jpg"/>
<span><a href="">More</a></span>
</div>
<div class="xw_c">
<ul>
<li class="a">
<a href="">
<img src="data:images/list_img.jpg" alt=""/>
<h3>Web前端开发HTML+CSS基础入门</h3>
<p>麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂 ... ...</p>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
</ul>
</div> </div> <div class="prod l">
<div class="tit">
<img alt="intro" src="data:images/chanpin.jpg"/>
<span>more</span>
</div>
<div class="cp_c">
<ul>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li class="mar0"><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
<li><a href=""><img src="data:images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li>
</ul>
</div>
</div> </div> </div> <div class="cl"></div> <!--由于参评推荐有浮动，会影响foot，在此清除浮动--> <div class="bottom">
<div class="footop">
<div class="core">
<span class="l">
<a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">加入我们</a> | <a href="">给我留言</a>
</span>
<span class="r">
2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1
</span>
</div>
</div>
<div class="footbot">
<div class="core">
<p class="l">
友情连接：<a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.dz7.com.cn" target="_blank">DZ起点网</a><a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.maiziedu.com" target="_blank">教育部</a><a href="http://www.maiziedu.com" target="_blank">新闻网</a>
</p>
</div>
</div> </div>
<!-- <div class="core">
<span>关于我们</span>|<span>联系我们</span>|<span>加入我们</span>|<span>给我留言</span>
</div-->
</div> <div class="totop">
<a href="#toppp"><img src="data:images/top_tool.jpg" alt=""></a>
</div>
</body>
</html>
HTML
*{margin:;}
body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
.core{ width: 960px;margin: 0 auto; }
.l{ float: left;}
.r{ float: right;}
.cl{ clear: both; }
.mar0{ margin: 0 }
img{ border: none }
/*.body{
margin:0;
}*/
.black{
width : 100%;
height : 24px;
background: #303030;
color:white;
line-height:24px; /*同块的高度便可以居中*/
}
.black span{
margin-right: 15px;
}
.black span.dw{ /*取消掉2015/9/1 风和日丽的margin-right的属性*/
margin:0px;
}
.black span.mr_0{
margin:;
}
.black a{
color: #d8d8d8;
text-decoration: none; /*下划线*/
}
.black a:hover{ /*鼠标放上链接的颜色:red*/
color: #f60;
}
/*------------------top——logos-----------------------------*/
.logos{
height: 59px;
margin: 15px 0;
}
.search{
width:330px;
height:41px;
margin-top: 24px;
margin-left: 45px;
}
.search td{ /*注意此种命名方式*/
height:41px;
}
.s_z{
width: 6px;
background: url("../images/s_z.jpg") no-repeat;
}
.s_c{
width: 240px;
background: url("../images/s_c.jpg") repeat-x;
z-index:;
}
.s_y{
width:78px;
background: url("../images/s_r.jpg") no-repeat;
}
.s_c input{
height: 34px;
line-height: 35px;
border: none;
margin-bottom: 3px;
width: 240px;
z-index:;
}
.s_y button{
width: 78px;
height: 41px;
background: none;
border:;
cursor: pointer; /*鼠标移上去变成小手*/
}
.phone{ /*也可以用.phone span{...}*/
height:59px;
line-height:59px;
font-size : 26px;
color : darkred;
margin-top:15px;
}
/*------------------nav-----------------------------*/
.nav{
width:100%;
height:39px;
background:url("../images/nav_bg.jpg") repeat-x;
}
.nav li{ /*!!!!去掉前面小点以及并没有使用span而是使用li排成一排*/
list-style:none;
float : left;
line-height : 39px;
padding-right:10px;
}
.nav li.a,.nav li:hover{
background: url("../images/nav_hover.jpg") repeat-x;
}
.nav a{
color:#fff;
font-size:16px;
text-decoration:none;
}
/*-----------------------------中间部分--------------------------*/
.ad{
margin-bottom: 10px;
}
.cont{
width: 540px;
height: 360px;
margin-right: 20px;
}
.tit{ <!--三个通用-->
width:480px;
padding-bottom: 8px;
border-bottom: 1px solid darkred; <!--实现下面那条红线-->
position: relative;
margin-bottom: 10px; <!--与下面内容有点分割显得好看-->
}
.tit span{
position:absolute;
right:;
bottom:;
}
.tit a{
color:darkred;
text-decoration:none;
}
.jj_c img{ /*此class实现了文字分布在图片左边*/
float:left;
margin:0 10px 10px 0;
}
.jj_c p{
color:rgb(140,140,140);
text-indent:24px;
}
.news{
width:400px;
height:360px;
}
.news ul{
padding-left:0px;
}
.xw_c{
}
.xw_c li{
list-style:none;
height:24px;
line-height:24px;
position: relative;
padding-left:15px;
background:url("../images/list_bg.jpg") no-repeat center left;
margin-bottom:6px;
}
.xw_c li.a{
background:none;
padding:;
height:76px;
}
.xw_c a{
color:#6161;
text-decoration:none;
}
.xw_c li img{
float:left;
margin:0 10 10 0;
}
.xw_c h3{
font-weight:normal;
font-size:14px;
}
.xw_c span{
position: absolute;
right:;
bottom:;
font-size: 12px;
color: #888888;
}
.xw_c p{
font-size:12px;
color:#888;
text-indent:24px;
}
.prod{
width:100%;
height:300px;
}
.cp_c{
}
.cp_c li{
float: left;
list-style:none;
margin:0 10px 10px 0;
width:151px;
height:96px;
overflow:hidden;
position:relative;
}
.cp_c span{
display:none;
position:absolute;
bottom:;
left:;
font-size:14px;
width:131px;
height:20px;
padding:0 10px;
color:#fff;
background:darkred;
overflow:hidden;
}
.cp_c li a:hover span{ /*!!!!!shenmegui!!!!*/
display:block;
}
.cp_c li.mar0{
margin-right:;
}
.bottom{
width:100%;
height:103px;
background:url("../images/footer_bg.jpg") repeat-x;
}
.footop{
height:80px;
line-height:80px;
color:#fff;
}
.footop a{
color:white;
text-decoration:none;
}
.footop .l{ /*卧槽，这个叼，改变已有类*/
font-size:16px;
}
.footbot a{
color:#fff;
text-decoration:none;
margin-right:5px;
}
.totop{
position:fixed;
width:40px;
height:205px;
right:;
bottom:190px;
}
CSS
二：医院首页制作
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="top">
<div class="core">
<a href=""><img src="data:images/logo.png"></a>
<div class="r">
<span><button type="submit" name="submit1"><img src="data:images/contact.png" alt="0"></span>
<span><button type="submit" name="submit2"><img src="data:images/weixin.png" alt="1"></span>
<span><button type="submit" name="submit3"><img src="data:images/weibo.png" alt="2"></span>
</div>
</div>
</div> <div class="core">
<div class="banner">
<span class="ban_i"><img src="data:images/iphone.png"></span>
<span class="ban_a"><img src="data:images/android.png"></span>
<span class="ban_i"><button type="submit" name="submit"></button></span>
<span class="ban_a"><button type="submit" name="submit"></button></span>
</div> <div class="intro">
<span><a href=""><img src="data:images/introduce1.png"></a><h3 style="margin-top:20px">沟通便捷</h3><p>24小时电话热线免费拨打，随时在线</p></span>
<span><a href=""><img src="data:images/introduce2.png"></a><h3 style="margin-top:20px">全国大医院</h3><p>全国各地大医院，只有想不到，没有找不到</p></span>
<span><a href=""><img src="data:images/introduce3.png"></a><h3 style="margin-top:20px">隐私保护</h3><p>隐私完全保密，签订保密合同</p></span>
<span><a href=""><img src="data:images/introduce4.png"></a><h3 style="margin-top:20px">评分制度</h3><p>我的疗效，您来评判，首发评测系统，追进医患共同责任</p></span>
</div> </div> <div class="cl"></div> <div class="core">
<div class="main">
</div>
</div> <div class="foot">
<div class="core">
<a href=""><img src="data:images/footer-logo.png"></a>
<ul class="r">
<li class="fi"><a href=""><span>关于我们</span></a> <a href=""><span>联系我们</span></a> <a href=""><span>帮助中心</span></a> <a href=""><span>网络地图</span></a></li>
<li class="ft"><span><img src="data:images/gongshang.png"></span><span>上海工商菊，还是竹叶青好喝，可乐汽少了一点</span></li>
</ul>
</div>
</div>
</body> </html>
HTML
*{margin:;}
body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
.core{ width: 1100px;margin: 0 auto; }
.l{ float: left;}
.r{ float: right;}
.cl{ clear: both; }
.mar0{ margin: 0 }
img{ border: none }
.top{
width:100%;
height:112px;
background:url("../images/header.png") repeat-x;
}
.top img[src="data:images/logo.png"]{
float:left;
margin-top:21px;
}
.top img[alt]{
position:relative;
margin-top:21px;
right:100px;
}
.top img[alt="1"]{
position:absolute;
top:38px;
right:125px;
}
.top img[alt="2"]{
position:absolute;
top:38px;
right:185px;
}
.top button{
background:none;
cursor:pointer;
border:;
width:;
height:;
}
.top button[name="submit1"]{
}
/*----------------banner--------------------*/
.banner{
width:1100px;
height:655px;
background:url("../images/banner.jpg") no-repeat;
position:relative;
}
.banner .ban_i{
position:absolute;
top:440px;
right:280px;
}
.banner .ban_a{
position:absolute;
top:520px;
right:280px;
}
.banner button{
width:227px;
height:68px;
background:none;
border:;
cursor:pointer;
}
.intro span{
float:left;
width:275px;
height:114px;
}
.intro img{
float:left;
margin-top:25px;
margin-right:3px;
}
.main{
height:671px;
background:url("../images/main.jpg");
margin-bottom:26px;
}
.foot{
width:100%;
height:49px;
background-color:black;
}
.foot img{
float:left;
}
.foot li{
list-style:none;
color:white;
float:right;
}
.foot a{
color:#fff;
font-size:16px;
text-decoration:none;
}
.fi{
position:relative;
right:;
}
.ft{
position:absolute;
margin-top:25px;
right:123px;
}
CSS
【回顾整理】HTML+CSS个的两个实战项目的更多相关文章
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 【javascript】原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- logback日志回顾整理--2018年8月8日
几年前使用过logback作为项目的日志框架. 当时觉得这个框架比log4j更加好用. 所以系统的学习了一遍. 后来换了公司, 不再使用logback. 如今, 又有机会使用logback了, 所以, ...
- HTML+css基础 css的几种形式 css选择器的两大特性
3.外联样式 css选择器的两大特性 1.继承性:所有跟文本字体有关的属性都会被子元素继承.且权重是0000. 2.层叠性:就是解决选择器权重大小的一种能力,就是看那个选择器的权重大.谁的权重大听谁的 ...
- css指示箭头两种实现方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 整理一下CSS最容易躺枪的二十规则，大家能躺中几条？
整理一下CSS最容易躺枪的二十规则,大家能躺中几条? 转载:API中文网 一.float:left/right 或者 position: absolute 后还写上 display:block? 二. ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- spring cloud和spring boot两个完整项目
spring cloud和spring boot两个完整项目 spring cloud 是基于Spring Cloud的云分布式后台管理系统架构,核心技术采用Eureka.Fegin.Ribbon.Z ...
随机推荐
- protocol buffer介绍(protobuf)
一.理论概述0.参考资料入门资料:https://developers.google.com/protocol-buffers/docs/javatutorial更详细的资料:For more det ...
- 在PHP中获取日期和时间
PHP提供了多种获取时间和日期的函数,除了通过time()函数获取当前的UNIX时间戳外,调用getdate()函数确定当前时间,通过gettimeofday()函数获取某一天中的具体时间.此外,在P ...
- php 面试
1.在PHP中,当前脚本的名称(不包括路径和查询字符串)记录在预定义变量(1)中:而链接到当前页面的URL记录在预定义变量(2)中. 答:echo $_SERVER['PHP_SELF']; echo ...
- Linux_ERROR 1045 (28000): Access denied for user 'root'@'localhost'
MySQL生成了root用户的随机密码(如下截图所示),并将这个随机密码放置在/root/.mysql_secret中.并且强制在第一次登陆时修改root用户的密码.Mysql 5.6及以后版本出处于 ...
- P1337 fibonacci数列（tyvj）
http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1 ...
- Altium Designer6打印PCB转印纸设置方法
在学校经常要用热转印法做一些简单的PCB板,自己用的AD6.6,学校的打印店用99的比较多,这就造成打印不方便.为了充分利用自己实验室的打印机,今天买回来两张PCB打印纸.发现用AD6打印同比例的PC ...
- pydev package包中__init__.py作用
Eclipse用pydev,新建一个pydev package时,总会自动地生成一个空的__init__.py文件. 原来在python模块的每一个包中,都有一个__init__.py文件(这个文件定 ...
- BZOJ3479: [Usaco2014 Mar]Watering the Fields
3479: [Usaco2014 Mar]Watering the Fields Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 81 Solved: ...
- java并发6-小结
为什么需要并发 并发其实是一种解耦合的策略,它帮助我们把做什么(目标)和什么时候做(时机)分开.这样做可以明显改进应用程序的吞吐量(获得更多的CPU调度时间)和结构(程序有多个部分在协同工作).做 ...
- 华夏的理财30天A和华夏财富宝货币哪个收益比较好?
1.收益性比较 华夏理财30天A001057属于债券型基金,华夏财富宝货币000343属于货币型基金(活期宝,类似余额宝)收益不同 2.流动性 活期宝是可以随时取现的产品,30天A是有封闭期的产品,这 ...