可以分开写
<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<meta name="viewport" content="width=device-width, initial-scale=1.0" /> ???????<meta http-equiv="X-UA-Compatible" content="ie=edge" /> ???????<title>满屋花</title> ???????<style type="text/css"> ???????????body{ ?????????????????background-color: #FFD8D9; ?????????????????text-align:center; ?????????????????font-size:12px; ???????????????margin:10px 0px 0px 0px; ?????????????????padding:0px; ??????????????} ?????????????#title img{ ???????????????width:700px ; ???????????} ????????????.container{ ?????????????????position:relative; ?????????????????margin:0px auto; ?????????????????width:800px; ?????????????????text-align:left; ?????????????} ?????????????#bar{ ?????????????????margin:0px; ??????????????????padding:0px; ?????????????} ???????????????#bar ul{ ?????????????????list-style:none; ?????????????????padding:0px; ?????????????????margin:0px; ?????????????} ?????????????#bar li{ ????????????????text-align:center; ?????????????????float:left; ??????????????????????????????????width:100px; ?????????????} ?????????????#bar a{ ?????????????????display:block; ?????????????????padding:9px 6px 11px 6px; ?????????????????/*background:url(img/button_bar.jpg) no-repeat; ?*/ ??????????????/*渐变色*/ ??????????????background: linear-gradient(180deg,#FFCED2,#FFF6F7,#FFFFFF); ???????????????margin:0px; ?????????????} ?????????????#bar a:link,#bar a:visited{ ?????????????????color:black; ?????????????????text-decoration:none; ?????????????} ?????????????#bar a:hover{ ?????????????????color:blueviolet; ?????????????????text-decoration:underline; ?????????????????font-size: 12px; ???????????} ?????????????#left{ ?????????????????width:180px; ?????????????????float:left; ?????????????????background:#FFFFFF url(leftbottom.jpg) no-repeat; ?????????????????margin:10px 0px 0px 0px; ???????????????border-radius:20px ; ?????????????} ?????????????#login{ ?????????????????background:url(img/login.jpg) no-repeat; ?????????????????padding:38px 0px 10px 0px; ?????????????} ?????????????#login form{ ?????????????????padding:0px; ?????????????????margin:0px; ?????????????} ?????????????#login p{ ?????????????????margin:1px; ?????????????????text-align:left; ?????????????????padding:5px 0px 0px 25px; ?????????????} ?????????????????????????#login form input.text{ ?????????????????border-bottom:1px solid black; ???????????????/*设置文本框的左右上的线没有*/ ?????????????????border-left:none; ???????????????border-right:none; ?????????????????border-top:none; ?????????????????padding:0px; ???????????????width:90px; ?????????????} ?????????????#login form input.btn{ ?????????????????border:1px solid #000000; ?????????????????background-color:#FFEFF0; ?????????????????height:17px; ?????????????????padding:0px; ?????????????} ?????????????#login p a:link,#login p a:visited{ ?????????????????color:#333333; ?????????????????text-decoration:none; ?????????????} ?????????????#login p a:hover{ ?????????????????color:#000088; ?????????????????texe-decoration:underline; ?????????????} ????????????????????????????#category{ ?????????????????background:url(img/fenlei.jpg) no-repeat; ?????????????????padding:50px 0px 35px 0px; ?????????????} ????????????????????????????#category h4{ ?????????????????margin:0px 18px; ?????????????????padding:3px 0px 1px 5px; ?????????????????background-color: #FFD1D1; ?????????????????font-size:12px; ?????????????} ?????????????#category ul{ ?????????????????list-style:none; ?????????????????margin:0px; ?????????????????padding:5px 22px 15px 22px; ?????????????} ????????????????????????????#category ?ul li{ ?????????????????padding:2px 0px 2px 16px; ?????????????????border-bottom:1px dashed red; ?????????????????background:url(img/dian.gif) no-repeat 5px 7px; ?????????????} ????????????????????????????#category ul li a:link , #category ul li a:visited{ ?????????????????color:black; ?????????????????text-decoration:none; ?????????????} ?????????????#category ul li a:hover{ ?????????????????color:blue; ?????????????????text-decoration:underline; ?????????????} ?????????????#right{ ?????????????????float:left; ?????????????????width:520px; ?????????????????margin:0px 0px 0px 1px; ?????????????} ?????????????#top{ ???????????????border-radius:21px ; ????????????????background:pink url(img/new.jpg) no-repeat; ???????????????padding:20px 0px 0px 1px; ????????????????margin-left:0px; ???????????????margin-top: 10px; ???????????????margin-bottom: 10px; ???????????} ?????????????#top img{ ?????????????????border:none; ?????????????????padding-left:0px; ?????????????} ???????????#top ul li{ ???????????????/*去点*/ ???????????????display: inline; ???????????????} ????????????#top ul li img{ ???????????????/*图片太大就需要设置宽度*/ ???????????????width: 157px; ???????????} ????????????#recommend{ ???????????????border-radius:21px ; ??????????????????background:url(img/recommend.jpg) no-repeat; ?????????????????margin:5px 0px 0px 0px; ?????????????????padding:35px 0px 0px 0px; ?????????????????background-color:#ffffff; ?????????????????margin-bottom: 20px; ???????????} ?????????????#recommend br, #new br,#buttom br{ ?????????????????display:block; ?????????????????clear:both; ?????????????????margin:0px; ?????????????????padding:0px; ?????????????} ?????????????#recommend ul , #new ul{ ?????????????????list-style:none; ?????????????????margin:0px; ?????????????????padding:5px 5px 5px 8px; ?????????????} ?????????????#recommend ul li,#new ul li{ ?????????????????text-align:center; ?????????????????float:left; ?????????????????width:125px; ?????????????} ?????????????#recommend ul li img , #new ul li img{ ?????????????????border:none; ?????????????????margin:5px 0px 3px 0px; ?????????????????padding:0px; ?????????????} ?????????????#recommend ul li a:link, #recommend ul li a:visited , #new ul li a:link,#new ul li a:visited{ ?????????????????color:#666666; ?????????????????text-decoration:none; ?????????????} ?????????????#recommend ul li a:hover , #new ul li a:hover{ ?????????????????color:#D20005; ?????????????????text-decoration:underline; ?????????????} ?????????????#new{ ???????????????border-radius:21px ; ??????????????????background:url(img/new.jpg) no-repeat; ?????????????????margin:5px ?0px 0px 0px; ?????????????????padding:35px 0px 0px 0px; ?????????????????background-color:#FFFFFF; ?????????????} ?????????????#buttom{ ???????????????border-radius:25px ; ??????????????????background:url(img/daogou.jpg) no-repeat; ?????????????????margin:5px 0px 10px 0px; ?????????????????padding:45px 0px 35px 0px; ?????????????????background-color:#FFFFFF; ???????????????font-size: 15px; ????????????????margin-top: 10px; ????????????} ?????????????#buttom ul{ ?????????????????list-style:none; ?????????????????margin:0px; ?????????????????padding:5px 5px 5px 30px; ?????????????} ?????????????#buttom ul li{ ???????????????/*设置文字前面的箭头 ?通过添加图片来处理 */ ???????????????background:url(img/jiantou.jpg) no-repeat 5px 6px; ????????????????padding:1px 0px 1px 12px; ?????????????????float:left; ?????????????????width:220px; ?????????????} ?????????????#buttom ul li a:link,#buttom ul li a:visited{ ?????????????????color:#222222; ?????????????????text-decoration:none; ?????????????} ?????????????#buttom ul li a:hover{ ?????????????????color:#8A2BE2; ????????????????/*当鼠标放在文本上面的时候会显示一根线*/ ????????????????text-decoration:underline; ?????????????} ????????????????????</style> ???</head> ???<body> ???????<div class="container"> ???????????<div id="title"> ???????????????<img src="img/title.jpg"> ???????????</div> ???????????<!--导航栏--> ???????????<div id="bar"> ???????????????<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> ???????????????????<li> ???????????????????????<a href="#">联系我们</a> ???????????????????</li> ???????????????????<li> ???????????????????????<a href="#">支付方式</a> ???????????????????</li> ???????????????</ul> ???????????</div> ???????????????????????<!--左边的一列--> ???????????<div id="left"> ???????????????<!--登录表单--> ???????????????<div id="login"> ???????????????????<form> ???????????????????????<p> ???????????????????????????用户：<input type="text" name="" ?value="" class="text"> ???????????????????????</p> ???????????????????????<p> ???????????????????????????密码：<input type="text" name="" ?value="" class="text"/> ???????????????????????</p> ???????????????????????<p> ???????????????????????????<input type="button" class="btn" value="登录"/> ???????????????????????????<input type="button" class="btn" value="注册"/><a href="#">忘记密码</a> ???????????????????????</p> ???????????????????</form> ???????????????</div> ???????????????????????????????<!--鲜花分类--> ???????????????<div id="category"> ???????????????????<h4><span>用途</span></h4> ???????????????????<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> ???????????????????????<li> ???????????????????????????<a href="#">道歉鲜花</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">探望祝福</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">开业花篮</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">会议用花</a> ???????????????????????</li> ???????????????????</ul> ???????????????????????????????????????<!--花材--> ???????????????????<h4><span>花材</span></h4> ???????????????????<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> ???????????????????????<li> ???????????????????????????<a href="#">马蹄兰</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">扶朗</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">剑兰</a> ???????????????????????</li> ???????????????????</ul> ???????????????????<!--价格--> ???????????????????<h4><span>价格</span></h4> ???????????????????<ul> ???????????????????????<li> ???????????????????????????<a href="#">100~200元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">200~300元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">300~400元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">400~500元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">500~600元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">600~800元</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">800元以上</a> ???????????????????????</li> ???????????????????</ul> ???????????????</div> ???????????</div> ???????????????????????<!--右边部分--> ???????????<div id="right"> ???????????????<!--上面--> ???????????????<div id="top"> ???????????????????<ul> ???????????????????????<li><a href="#"><img src="img/new1.jpg"></a></li> ??????????????????????????<li><a href="#"><img src="img/new2.jpg"></a></li> ???????????????????????<li><a href="#"><img src="img/new3.jpg"></a></li> ???????????????????</ul> ???????????????</div> ???????????????????????????????????????????????<!--推荐部分--> ???????????????<div id="recommend"> ???????????????????<ul> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower1.jpg"><br/>幸福的味道</a><br/>￥288元></li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower2.jpg"><br/>阳光守护你</a><br/>￥300元</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower3.jpg"><br/>温情永远</a><br/>￥268元</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower4.jpg"><br/>爱无界</a><br/>￥318元></li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower5.jpg"><br/>亲亲宝贝</a><br/>￥368元</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower6.jpg"><br/>相信是缘</a><br/>￥188元</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower7.jpg"><br/>水晶童话</a><br/>￥198元></li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower8.jpg"><br/>天使之爱</a><br/>￥268元</li> ???????????????????</ul> ???????????????????<br/> ???????????????</div> ???????????????<div id="new"> ???????????????????<ul> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower9.jpg"><br/>粉色迷情</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower10.jpg"><br/>海岸的优雅</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower11.jpg"><br/>百年地中海</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#"><img src="img/flower12.jpg"><br/>爱要说出口</a> ???????????????????????</li> ???????????????????</ul> ???????????????????<br> ???????????????</div> ???????????????<div id="buttom"> ???????????????????<ul> ???????????????????????<li> ???????????????????????????<a href="">各种鲜花所代表的含义</a> ???????????????????????</li> ???????????????????????<li> ???????????????????????????<a href="#">花的喜怒哀乐与人的各种感觉</li> ???????????????????????<li> ???????????????????????????<a href="#">养花与养生之道</li> ???????????????????????<li> ???????????????????????????<a href="#">每天清晨的第一缕阳光</li> ???????????????????????<li> ???????????????????????????<a href="#">花香的味道</li> ???????????????????????<li> ???????????????????????????<a href="#">世界各地关于送花的习俗</li> ???????????????????????<li> ???????????????????????????<a href="#">手捧一束鲜花的等待</li> ???????????????????</ul> ???????????????????<br> ???????????????</div> ???????????</div> ???????</div> ???</body></html>2018.7.1 ?css项目之模仿满屋花首页css+idv布局实现
原文地址：https://www.cnblogs.com/qichunlin/p/9221112.html