梅兰商城实战（DIV+CSS）

最新推荐文章于 2019-08-14 09:47:07 发布
最新推荐文章于 2019-08-14 09:47:07 发布
阅读量999 收藏 3
点赞数 3
分类专栏： 前端 文章标签： css div html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43093230/article/details/98230207
版权

Div+CSS梅兰商城

适合小白练习html+css，原网站 http://www.meilansm.com/
由于网页结构简单，所以选择此网站练习，不要介意界面丑（~ <> ~）
建议：
（1）先分析网页结构，划分div块
（2）根据div块编辑层叠样式表
（3）优化代码（代码超整齐，学习好用）
代码如下：
html部分：

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>梅兰商贸</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/common.css">
</head>

<body>
	<!-- START top -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_left fl">
				<p>您好，欢迎来到建材网！</p>
			</div>
			<div class="top_page_right fr">
				<ul>
					<li><a>首页</a></li>
					<li><a>棕榈油</a></li>
					<li><a>马来西亚移民</a></li>
					<li><a>特色定制产品</a></li>
					<li><a>客服中心</a></li>
					<li><a>我的收藏</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- END top -->
	<!-- START logo -->
	<div class="logo">
		<div class="logo_left fl">
			<img src="img/logo.jpg">
		</div>
		<div class="logo_right fr">
			<div class="input_content">
				<input type="input" class="logo_reseach fl" placeholder="在这里搜索">
				<input type="button" value="搜索" class="btn fl"></input>
			</div>
		</div>
	</div>
	<!-- END logo -->
	<!-- START nav-->
	<div class="nav">
		<ul>
			<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>
	<!-- END logo-->
	<!-- START banner -->
	<div class="banner">
		<div class="subNav fl">
			<h2>商机分析</h2>
			<ul>
				<li><img src="img/01.jpg"><a href="">市场商机</a></li>
				<li><img src="img/02.jpg"><a href="">棕榈油</a></li>
				<li><img src="img/03.jpg"><a href="">马来西亚移民</a></li>
				<li><img src="img/04.jpg"><a href="">特色定制产品</a></li>
			</ul>
		</div>
		<div class="ad fl">
			<img src="img/Gemi.jpg">
		</div>
		<div class="message fr">
			<div class="message_top">
				<h3>网站公告:</h3>
				<p>价格实惠，量身为营销预算不<br>多的供应商所设。<a href="#">了解详情</a> </p>
			</div>
			<div class="message_bottom">
				<h2>找信息或者发信息遇到问题</h2>
				<p>咨询电话：0434-3201492</p>
				<img src="img/zixun.jpg" alt="留言咨询">
			</div>
		</div>
	</div>
	<!-- END banner -->
	<!-- START food_nav -->
	<div class="food_nav">
		<h2>食品生产贸易</h2>
	</div>
	<!-- / END food_nav -->
	
	<!-- START food_content -->
	<div class="food_content">
		<div class="food_content_left fl">
			<div class="row_one">
				<div class="row_one_left fl">
					<img class="fl" src="img/zhima.jpg" alt="">
					<div class="food_introduction">
						<h3>芝麻</h3>
						<p>名称 芝麻 英文名称Sesame产地<br>热带地区及部分温带...
							<input class="buy" type="button" value="立即购买">
						</p>
					</div>
				</div>
				<div class="row_one_right fr">
					<img class="fl" src="img/putou.jpg" alt="">
					<div class="food_introduction">
						<h3>中国新疆葡萄</h3>
						<p>名称 新疆葡萄 英文名称 产地 吐鲁番 地理特点 深居内...
							<input class="buy" type="button" value="立即购买">
						</p>
					</div>
				</div>
			</div>
			<div class="row_two">
				<div class="row_two_left fl">
					<img class="fl" src="img/hetao.jpg" alt="">
					<div class="food_introduction">
						<h3>中国秦皇岛核桃</h3>
						<p>名称 核桃 英文名称 Walnut 产地 秦皇岛 地理特点 土...
							<input class="buy" type="button" value="立即购买">
						</p>

					</div>
				</div>
				<div class="row_two_right fr">
					<img class="fl" src="img/putou.jpg" alt="">
					<div class="food_introduction">
						<h3>中国新疆大枣</h3>
						<p>名称 新疆大枣 英文名称 Xinjiang <br>jujube 产地 新疆喀..
							<input class="buy" type="button" value="立即购买">
						</p>
					</div>
				</div>
			</div>
		</div>

		<div class="food_content_right fr">
			<h2>行业资讯</h2>
			<ul>
				<li><a href="#">网红张雪峰学历有待核查</a></li>
				<li><a href="#">马来西亚游民</a></li>
				<li><a href="#">秦皇岛特色的礼品--欢迎海</a></li>
				<li><a href="#">其他吧，你随便爱咋咋覅</a></li>
			</ul>
		</div>
	</div>
	<!--START footer -->
	<div class="foot">
		<div class="friendly">
			<h2>友情链接：</h2>
			<a href="#">中国立山</a>
			<a href="#">肥料机械网</a>
			<a href="#">全球文化创意网</a>
			<a href="#">贝安宝</a>
		</div>
		<div class="copyright">
			<div class="foot_nav">
				<a href="">关于我们 |</a>
				<a href="">建材通服务 |</a>
				<a href="">网站建设 |</a>
				<a href="">诚聘英才 |</a>
				<a href="">友情链接 |</a>
				<a href="">版权声明 |</a>
				<a href="">帮助中心 |</a>
				<a href="">网站地图 |</a>
			</div>
			<p>中国建材网 版权所有 2000-2012 服务热线：0335-8524800 请与我们		联系:469706783@qq.com 业务专员qq:153120106</p>
		</div>
	</div>
	<!-- END footer -->
</body>

</html>

css部分

/* 公共样式(common.css) */
.fl{
    float:left;
}
.fr{
    float:right;
}
/* 重置样式(reset.css) */
@charset "utf-8";
html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video{
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      font-weight: normal;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section{
      display: block;
    }
    ol, ul, li{
      list-style: none;
    }
    blockquote, q{
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after{
      content: '';
      content: none;
    }
    table{
      border-collapse: collapse;
      border-spacing: 0;
    }
     
    /* custom */
    a{
      /* color: #7e8c8d; */
      text-decoration: none;
      -webkit-backface-visibility: hidden;
    }
    ::-webkit-scrollbar{
      width: 5px;
      height: 5px;
    }
    ::-webkit-scrollbar-track-piece{
      background-color: rgba(0, 0, 0, 0.2);
      -webkit-border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:vertical{
      height: 5px;
      background-color: rgba(125, 125, 125, 0.7);
      -webkit-border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:horizontal{
      width: 5px;
      background-color: rgba(125, 125, 125, 0.7);
      -webkit-border-radius: 6px;
    }
    html, body{
      width: 100%;
      font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
    }
    body{
      line-height: 1;
      -webkit-text-size-adjust: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    html{
      overflow-y: scroll;
    }
     
    /*清除浮动*/
    .clearfix:before,
    .clearfix:after{
      content: " ";
      display: inline-block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .clearfix{
      *zoom: 1;
    }
    input{
      border: none;
    }

/* 基础样式(main.css) */
@charset "utf-8";
html {
	font: 12px '宋体'
}

/* 头部样式 */

.top {
	height: 26px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #D8D8D8;
}

.top_page {
	width: 970px;
	margin: 0 auto;
	/* 测试用 */
	/* background: red; */
}

.top_page_left {
	line-height: 26px;
}

.top_page_right {
	line-height: 26px;
}

.top_page_right ul li {
	display: inline-block;
	margin-left: 10px;
}

/* logo部分样式 */

.logo {
	width: 970px;
	height: 98px;
	/* 水平居中 */
	margin: 0 auto;
}

.logo_left {
	width: 200px;
	height: 55px;
	/* 测试用 为什么作为背景图片会显示不全*/
	/* background:url(../img/logo.jpg) no-repeat; */
}

.logo_right {
	width: auto;
	height: 42px;
	/* 测试用 */
	background: rgb(224, 225, 226);
	margin-top: 29px;
	border: 1px solid #c9c9c9;
}

.input_content {
	margin: 5px 5px 5px 4px;
}

.logo_reseach {
	height: 28px;
	width: 418px;
	border: 1px solid #C9C9C9;
	color: rgb(198, 199, 202);
}

.btn {
	background-color: #3070D1;
	height: 33px;
}

/* nav */

.nav {
	width: 970px;
	height: 25px;
	margin: 0 auto;
	border-bottom: 2px solid #0266A3;
}

.nav li {
	/* 可以使li标签的内容横向放置 */
	float: left;
	padding: 0 15px;
	line-height: 25px;
	font-size: 14px;
	font-weight: bold;
}

/* 光标移动至li位置时背景颜色变为color */

.nav li:hover {
	background-color: #3070D1;
}

.nav li a {
	color: #0266A3;
}

/* 光标移动至a标签位置改变字体颜色 */

.nav li a:hover {
	color: white;
}

/* banner部分开始 */

.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 4px;
	/* 测试用 */
	/* background-color: #3070D1; */
}

.subNav {
	width: 200px;
	height: 210px;
	/* 测试用 */
	/* background-color: red; */
	margin-right: 11px;
}

.subNav h2 {
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
	/* 不能设置为margin-left:20px；由于需要设置
	背景颜色，边距应该是盒子之内的一部分 */
	padding-left: 20px;
}

.subNav ul {
	height: 180px;
	padding-left: 10px;
	background-color: #ebf0f6;
}

.subNav li {
	line-height: 28px;
	font-size: 15px;
	padding-top: 12px;
}

.subNav li a {
	padding-left: 15px;
}

.ad {
	width: 520px;
	height: 210px;
	/* 测试用 */
	background-color: green
}

.ad img {
	width: 520px;
	height: 210px;
	padding:0;
	margin:0;
}

.message {
	width: 230px;
	height: 210px;
	/* 测试用 */
	/* background-color: aqua; */
}

.message_top {
	height: 95px;
	background-color: #f7faff;
	background: url("../img/gao.jpg");
	margin-bottom: 21px;
}

.message_top h3 {
	padding-top: 14px;
	padding-left: 14px;
	font-size: 14px;
	font-weight: bold;
}

.message_top p {
	color: #666666;
	font-size: 12px;
	/* font-weight:bold; */
	margin-top: 14px;
	margin-left: 61px;
	line-height: 22px;
}

.message_top a {
	color: #666666;
	float: right;
	margin-right: 14px;
}

.message_bottom {
	height: 92px;
	margin: 0 auto;
	text-align: center;
	background-color: #f7f7f7;
}

.message_bottom h2 {
	font-size: 16px;
	color: #C0B2B4;
	padding-top: 20px;
}

.message_bottom p {
	color: #97B2E6;
	line-height: 24px;
	font-weight: bold;
}

/* 食品导航栏开始 */

.food_nav {
	width: 970px;
	height: 34px;
	border-top: 2px solid #C3D6E4;
	/* margin必须放在margin-top的前面，
		否则margin-top不起作用 */
	margin: 0 auto;
	margin-top: 20px;
	background-color: #ECF1F7;
}

.food_nav h2 {
	line-height: 34px;
	font-size: 14px;
	font-weight: bold;
	margin-left: 15px;
	color: #666666;
}

/* 食品生产贸易内容部分 */

.food_content {
	width: 970px;
	height: 345px;
	margin: 0 auto;
	margin-top: 20px;
	/* 测试用背景颜色 */
	/* background-color: red; */
}

.food_content_left {
	width: 729px;
	height: 345px;
	/* 测试用背景颜色 */
	/* background-color: #0266A3; */
	border: 1px solid #CCCCCC;
}

/* 第一行产品 */

.row_one {
	width: 700px;
	height: 135px;
	margin: 24px auto;
	/* 测试用背景颜色 */
	/* background: #C3D6E4; */
}

.row_one .row_one_left {
	padding: 15px;
	width: 300px;
	height: 107px;
	/* 测试用背景颜色 */
	/* background-color: red; */
}

.row_one .row_one_left img {
	width: 100px;
	height: 100px;
	margin-right: 20px;
}

.row_one .row_one_left .food_introduction h3 {
	font-size: 12px;
	font-weight: bold;
	color: black;
	margin-bottom: 12px;
}

.row_one .row_one_left .food_introduction p {
	color: #cc6663;
	font-size: 12px;
	line-height: 24px;
}

.row_one .row_one_left .food_introduction .buy {
	width: 100px;
	height: 30px;
	background-color: #0984E2;
	border-radius: 5%;
}

.row_one .row_one_right {
	padding: 15px;
	width: 300px;
	height: 107px;
	/* 测试用 */
	/* background: #0984E2; */
}

.row_one .row_one_right img {
	width: 100px;
	height: 100px;
	margin-right: 15px;
}

.row_one .row_one_right .food_introduction h3 {
	font-size: 12px;
	font-weight: bold;
	color: black;
	margin-bottom: 12px;
}

.row_one .row_one_right .food_introduction p {
	color: #cc6663;
	font-size: 12px;
	line-height: 24px;
}

.row_one .row_one_right .food_introduction .buy {
	width: 100px;
	height: 30px;
	background-color: #0984E2;
	border-radius: 5%;
}

/* 第二行产品 */

.row_two {
	width: 700px;
	height: 135px;
	margin: 24px auto;
	/* 测试用背景颜色 */
	/* background: #C3D6E4; */
}

.row_two .row_two_left {
	padding: 15px;
	width: 300px;
	height: 107px;
	/* 测试用背景颜色 */
	/* background-color: red; */
}

.row_two .row_two_left img {
	width: 100px;
	height: 100px;
	margin-right: 20px;
}

.row_two .row_two_left .food_introduction h3 {
	font-size: 12px;
	font-weight: bold;
	color: black;
	margin-bottom: 12px;
}

.row_two .row_two_left .food_introduction p {
	color: #cc6663;
	font-size: 12px;
	line-height: 24px;
}

.row_two .row_two_left .food_introduction .buy {
	width: 100px;
	height: 30px;
	background-color: #0984E2;
	border-radius: 5%;
}

.row_two .row_two_right {
	padding: 15px;
	width: 300px;
	height: 107px;
	/* 测试用 */
	/* background: #0984E2; */
}

.row_two .row_two_right img {
	width: 100px;
	height: 100px;
	margin-right: 15px;
}

.row_two .row_two_right .food_introduction h3 {
	font-size: 12px;
	font-weight: bold;
	color: black;
	margin-bottom: 12px;
}

.row_two .row_two_right .food_introduction p {
	color: #cc6663;
	font-size: 12px;
	line-height: 24px;
}

.row_two .row_two_right .food_introduction .buy {
	width: 100px;
	height: 30px;
	background-color: #0984E2;
	border-radius: 5%;
}

.food_content_right {
	width: 230px;
	height: 345px;
	/* 测试用背景颜色 */
	/* background-color: pink; */
	border: 1px solid #CCCCCC;
}

.food_content_right h2 {
	color: #666666;
	margin-top: 10px;
	margin-left: 10px;
	line-height: 30px;
	height: 30px;
	border-bottom: 1px solid #CCCCCC;
}

.food_content_right ul {
	color: #666666;
	margin-top: 10px;
	margin-left: 20px;
	line-height: 30px;
	border-bottom: 1px solid #CCCCCC;
}

.food_content_right ul li {
	list-style: square;
}

/* 底部样式 */

.foot {
	border-top: 1px solid #666666;
	/* border-bottom: 2px solid #0266A3; */
	width: 970px;
	margin: 0 auto;
	margin-top: 15px;
	margin-bottom: 15px;
}

.foot .friendly {
	height: 30px;
	line-height: 30px;
	border-bottom: 3px solid #0266A3;
}

.foot .friendly h2 {
	display: inline-block;
}

.foot .copyright .foot_nav {
	margin: 12px auto;
	text-align: center;
}

.foot .copyright .foot_nav a {
	color: black;
}

.foot .copyright p {
	margin: 0 auto;
	text-align: center;
}

欢迎指导~~~~

马码侠
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
梅兰商城项目实战.psd
04-28
梅兰商城的PSD文件，
梅兰商城PSD及项目源码
08-19
免积分，希望CSDN能像GitHub一样资源共享
CSS梅兰商城PSD+视屏资源迅雷下载链接
07-13
CSS梅兰商城PSD+视屏迅雷下载链接
梅兰商贸项目实战素材下载
05-22
主要包含梅兰商城基本素材和基本的代码集合，可以帮助更多的初学者快速掌握基本的网页开发技术和代码规范。
梅兰商城项目搭建
02-20
梅兰商城项目搭建
前端静态页面练习——梅兰商城
sinat_38011533的博客
08-14 923
网站实战二——梅兰商城 1.0 首先分析PSD文件布局 顶部 欢迎信息（左）+导航信息（右） logo区 logo（左）+搜索框（右） 网站导航 次级导航（左）+产品信息（中）【视频里没做】+辅助信息（右） 建筑材料部分 具体产品（左）+建筑资讯（右） 儿童安全座椅 左右两部分 工艺美术品 左右两部分 底部设计 1.1 开发整站的两种方式 第一种：从头往下依次把...
CSS梅兰商城项目实战
03-17
本套CSS项目实战课程为制作梅兰商城首页，以网页布局定位的基础知识为依托，灵活运用CSS的全部知识和小技巧，带你深入剖析经典网页的制作过程，同时涉及到了CSS样式的初始化、版心控制、精灵图的使用、搜索引擎优化等大型网站必用的技能，满满的都是干货。更多视频请搜索“传智播客”
CSS梅兰商城项目实战代码
03-11
CSS梅兰商城项目实战代码，适合于掌握基础的HTML及css编程的新手进行实际的项目实战，难度不高，教你如何进行静态界面的设计，很适合新手小白。
前端项目实战（梅兰商城）
热门推荐
x_chengqq
05-10 1万+
前端项目步骤： 1.拿到美工设计图后，开始浏览页面布局，将页面简单划分出来 开发整站的两种方式： ①从上到下依次把每个盒子写完 ②先把整站的布局给搞定，然后再把每个布局的盒子中的子元素补齐（模块化）  个人比较倾向 2.整站项目的目录结构搭建好：css   js image index.html 3.css初始化：这里用的是YAHO的css初始化样式。地址为[email protected].
梅兰psd 尙合网站项目、 时尚实习项目
07-30
梅兰psd 尙合网站项目、 时尚实习项目、psd、素材分享，对于html，和css的小白来说，是不错的练习材料，而且有代码可以参考，带psb源文件
CSS梅兰商城项目实战基础视频教程-video
12-24
CSS梅兰商城项目实战基础视频教程-video 131.梅兰商城首页项目搭建132.项目CSS初始化133.测量页面版心宽度及页面top部分Html134.项目top部分完成135.使用精灵图完成三角显示136.logo部分完成和搜索引擎优化137.搜索框部分完成138.页面导航条制作139.banner区域结构完成140.商机市场部分完成141.完成详细信息142.完成建筑材料143.产品部分的分析144.产品部分的进一步细分以及完成立即购买145.完成产品部分的左部146.完成建材资讯147.完成友情链接148.完成关于我们
黑马程序员-梅兰商城项目实战
04-25
黑马程序员-梅兰商城项目实战，包含图片素材和编写源码。
CSS梅兰商城项目实战.psd
11-02
梅兰商城的PSD文件，为啥要大于50个字才能上传。。。。。。。
传智播客梅兰商城项目实战HTML+CSS源代码.rar
09-10
本人根据传智播客梅兰商城项目实战的PSD文件。做的网页，用到了HTML5+CSS3的一些技术。欢迎大家下载查看。本人也是新手一个！
CSS梅兰商城项目实战PSD
09-19
学习梅兰商城项目实战PSD文件
CSS梅兰商城项目实战.rar
09-09
传智播客的CSS项目梅兰商城网页设计项目。此PSD文件是本人在网上多方查找，购买而得。 新手学习CSS布局的朋友非常适合！
CSS梅兰商城项目实战源码+psd.rar
11-07
CSS梅兰商城项目实战的源码与psd文件，代码是根据视频所敲打，psd文件很好的学习资料。
请模仿古龙写一部以梅兰竹菊为主角的武侠小说，要求运用古代相关典故赋予角色性格
最新发布
02-18
这是一个关于三个英雄的故事，他们分别叫梅兰竹菊。梅兰竹菊是一位勇敢而忠诚的青年，他拥有无私的精神和坚定的信念，他勇敢地挑战一切邪恶。竹是一位聪明而智慧的青年，他拥有无尽的能量和极大的智慧，他能够精确地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值