2018.7.1 css项目之模仿满屋花首页css+idv布局实现
可以分开写
<!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布局实现的更多相关文章
- 项目开发中如何规范自己的CSS
1.CSS规范 - 分类方法 CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样 ...
- webpack项目在开发环境中使用静态css文件
webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...
- HTML+CSS项目——模拟京东网页
项目准备 项目名称:京东商城 项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari,chrome等.谁让我再测ie6,就 ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(二)
品优购项目(二) 1. 品优购首页布局 命名集合: 名称 说明 快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods ...
- CSS练习一(模仿163邮箱登陆)
// '); code = code.replace(/&/g, '&'); return code; }; var runCode = function (code) { if (c ...
- 在一个项目里，公共一个css、各个页面分别对应不同的css？
是部分公用才对.比如所有页面的头部脚部一般是一样的,就放在一个公用css里如common.css,每个页面都要链接这个css.不一样的部分单独写一个,如主页就做一个index.,css,列表页就写一个 ...
- CSS Houdini：用浏览器引擎实现高级CSS效果
vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...
- gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
随机推荐
- KONG -- 图形化管理（Kong Dashboard）
前面安装的 KONG 的版本是社区版的 1.0.2,官方的 KONG Manager 好像只有企业版才提供.在 github 上找了一个开源的图形化管理应用 -- Kong Dashboard (ht ...
- CodeForces - 906D Power Tower（欧拉降幂定理）
Power Tower CodeForces - 906D 题目大意:有N个数字,然后给你q个区间,要你求每一个区间中所有的数字从左到右依次垒起来的次方的幂对m取模之后的数字是多少. 用到一个新知识, ...
- jzoj3208. 【JSOI2013】编程作业（kmp）
题面 Description Will相信,很多同学都有过这样的经历:大牛已经写好了编程作业,而作为菜鸟的自己不会写怎么办呢?拿大牛的代码抄一下嘛!但是提交一模一样的作业是不是不太好?于是就改一改变量 ...
- 使用pods添加第三方的时候，出现ld: library not found for -lpop
ld: library not found for -lpop 错误,是在使用pods添加第三方的时候,出现的编译错误,同时伴随着的是error: linker command failed with ...
- 关于状态压缩DP以及状态压缩
首先要明确:状态压缩是利用数字来代表一组序列的方法,从而降低序列访问的复杂度,本质上跟HASH有着差不多的思想,但是其实就是数位运算的一种 定义:集合中共有N个数字,其中每个数字均小于K,能么我们可以 ...
- webpack配置Jquery全局包及全局包插件
一:在配置文件配置: plugins: [ //将来以template为模版,生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWe ...
- Nginx实战（三） 日志配置与切割
访问日志主要记录客户端访问Nginx的每一个请求,格式可以自定义.通过访问日志,你可以得到用户地域来源.跳转来源.使用终端.某个URL访问量等相关信息. Nginx中访问日志相关指令主要有两条,一条是 ...
- Jmeter4.0----正则表达式提取器（12）
1.说明 有时候需要将前一个请求返回的数据作为下一个请求的参数时,我们就需要正则表达式提取器.使用正则表达式提取器去提取我们想要的部分再传入后面的请求中. (之前看了一篇不错的博客,可以参考学习 ht ...
- fiddle
web开发中Chrome.IE.firefox等浏览器都自带提供了插件帮助开发者跟踪http数据,在手机客户端怎么实现http数据抓包呢?Fiddler可以实现真机调试抓包.Fiddler支持Any ...
- ajax无刷新评论示例
下面就为大家带来一篇 ajax无刷新评论示例.学习还是有点帮助的,给大家做个参考吧. 这是留言板的界面,当用户点击提交留言的时候,自动提交到我的留言下面 留言内容中为空,或者为灰色的“没有填写留言内容 ...