CSS实战（1）

最新推荐文章于 2022-12-06 15:43:00 发布
最新推荐文章于 2022-12-06 15:43:00 发布
阅读量719 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dawn___/article/details/54617389
版权

头部 start

我们以京东首页为模板，使用webstorm做一个网页。

项目文件夹

我们的网页都应该放到一个文件夹内，即为本地站点。

新建文件夹

在webstorm中打开→文件→京东网页→确定→当前窗口
建一个Html文件，起名：index

一、 规划页面

项目文件夹
1.首页 index.html
2.样式 css文件夹（Base.css或者global.css）
3.图片 images文件
4.特效 js文件夹

在京东网页文件夹下，创建一个Css文件夹，在WS的Css文件夹下新建一个基本样式（base.css）和首页样式（index.css）

创建CSS

二、 Css初始化

    /*此句话可有可无*/
    @charset "UTF-8";
    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4,      h5, h6, form, fieldset, legend, img { margin:0; padding:0;   }
    fieldset, img,input,button { border:none;      padding:0;margin:0;outline-style:none; }
    ul, ol { list-style:none; }
    input { padding-top:0; padding-bottom:0; font-family:     "SimSun","宋体";}
    /*垂直居中*/
    select, input { vertical-align:middle;}
    select, input, textarea { font-size:12px; margin:0; }
    /*防止拖动*/
    textarea { resize:none; }
    /*  去掉图片低测默认的3像素空白缝隙*/
    img {border:0;  vertical-align:middle; } 
    /*用于表格属性, 表示表格的两边框合并为一条*/
    table { border-collapse:collapse; }
    body {
    /*字号，行高，字体（）宋体*/
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
    }
    /*！！！！！！清除浮动的最好方法！！！！！！！*/
    .clearfix:before,.clearfix:after {
    content:"";
    display:table;
    }
    .clearfix:after{clear:both;}
    .clearfix{
    *zoom:1;/*IE/7/6*/
    }
    a {color:#666; text-decoration:none; }
    a:hover{color:#C81623;}
    h1,h2,h3,h4,h5,h6 {text-decoration:none;font- weight:normal;font-size:100%;}
    s,i,em{font-style:normal;text-decoration:none;}
    .col-red{color: #C81623!important;}

    /*公共类*/
    .w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
    }
    .fl {
    float:left
    }
    .fr {
    float:right
    }
    .al {
    text-align:left
    }
    .ac {
    text-align:center
    }
    .ar {
    text-align:right
    }
    .hide {
    display:none
    }

三、 引入Css

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>不是所有的页面都叫京东</title>
    <link rel="stylesheet" href="css/base.css">
    </head>
    <body>
    </body>
    </html>

将index.css也以同样方式引入，注意base.css与index.css的顺序，一定是base.css在index.css上面

四、 Favicon图标

    <link rel="shortcut icon" href="favicon.ico">

引入前：

这里写图片描述

引入后：

这里写图片描述

图标获取方式：www.jd.com/favicon.ico
淘宝也是一样www.taobao.com/favicon.ico
图片保存在“京东网页”文件夹下，不放入image里。

补充知识

font:字体加粗 字号/行高 字体；（必须有字号和字体，其他可以没有）
S del 删除线
I em 倾斜
U ins 下划线
font-weight:700;(=font-weight:bold;) 字体加粗
font-weight:normal; 让字体不加粗
font-style：normal; 字体不倾斜
text-decoration:none; 不下划线 不删除线

定位： position:static;静态定位 约等于标准流
浮动的不浮动： float:none; none left right
定位的不定位： position: static; absolute relative fixed

下拉框小三角

    .dt{
    padding:0 20px 0 10px;
    position: relative;
    }
    .dt i{
    font:400 15px/15px "宋体";
    top:12px;
    right:3px;
    position: absolute;
    height:7px;
    overflow: hidden;

    width:15px;
    }
    .dt s{
    position: absolute;
    top:-8px;
    }

制作网页顶部整体代码

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>不是所有的页面都叫京东</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="shortcut icon" href="favicon.ico">
    </head>
    <body>
    <!--京东的头部导航开始-->
    <div class="shortcut">
    <div class="w">
    <div class="fl">
    <div class="dt">送至：北京
    <i><s>◇</s></i>
    </div>

    </div>
    <div class="fr">
    <ul>
    <li>
    <!--&nbsp是将你好，请登录与免费注册之间加空格-->
    <a href="#"> 你好，请登录</a>&nbsp;&nbsp;
    <a href="#" class="col-red">免费注册</a>
    </li>
    <li class="line"></li>
    <li>我的订单</li>
    <li class="line"></li>
    <li class="fore">
    我的京东
    <i><s>◇</s></i>
    </li>
    <li class="line"></li>
    <li>京东会员</li>
    <li class="line"></li>
    <li>企业采购</li>
    <li class="line"></li>
    <li class="fore tel-jd">
    <em class="tel"></em>
    手机京东
    <i><s>◇</s></i>
    </li>
    <li class="line"></li>
    <li class="fore">
    关注京东
    <i><s>◇</s></i>
    </li>
    <li class="line"></li>
    <li class="fore">
    客户服务
    <i><s>◇</s></i>
    </li>
    <li class="line"></li>
    <li class="fore">
    网站导航
    <i><s>◇</s></i>
    </li>
    </ul>
    </div>

    </div>
    </div>
    </body>
    </html>

base.css

    @charset "UTF-8";
    /*css 初始化 */
    html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4,     h5, h6, form, fieldset, legend, img { margin:0; padding:0;      }
    fieldset, img,input,button { border:none;  padding:0;margin:0;outline-style:none; }
    ul, ol { list-style:none; }
    input { padding-top:0; padding-bottom:0; font-family:    "SimSun","宋体";}
    /*垂直居中*/
    select, input { vertical-align:middle;}
    select, input, textarea { font-size:12px; margin:0; }
    textarea { resize:none; } /*防止拖动*/
    img {border:0;  vertical-align:middle; }   
    table { border-collapse:collapse; }
    body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
    }
    .clearfix:before,.clearfix:after {
    content:"";
    display:table;
    }
    .clearfix:after{clear:both;}
    .clearfix{
    *zoom:1;/*IE/7/6*/
    }
    a {color:#666; text-decoration:none; }
    a:hover{color:#C81623;}
    h1,h2,h3,h4,h5,h6 {text-decoration:none;font-    weight:normal;font-size:100%;}
    s,i,em{font-style:normal;text-decoration:none;}
    .col-red{color: #C81623!important;}

    /*公共类*/
    .w {  /*版心 提取 */
    width: 1210px;margin:0 auto;
    }
    .fl {
    float:left
    }
    .fr {
    float:right
    }
    .al {
    text-align:left
    }
    .ac {
    text-align:center
    }
    .ar {
    text-align:right
    }
    .hide {
    display:none
    }

    /*头部导航开始*/
    .shortcut {
    height: 30px;
    line-height: 30px;
    background-color:#f1f1f1;
    width: 100%;
    }
    .dt,
    .shortcut .fore{
    padding:0 20px 0 10px;
    position: relative;
    }
    .dt i,
    .fore i
    {
    font:400 15px/15px "宋体";
    position:absolute;
    top:13px;
    right:3px;
    height:7px;
    overflow:hidden;
    width: 15px;
    }
    .dt s,
    .fore s{
    position: absolute;
    top:-8px;
    left: 0;
    }
    .fr li {
    float:left;
    padding: 0 10px;
    }
    .fr .line {
    width: 1px;
    height: 12px;
    background-color: #ddd;
    margin-top: 9px;
    padding:0;
    }
    .shortcut .tel-jd{
    padding:0 20px 0 25px;
    }
    .tel{
    position: absolute;
    width: 15px;
    height: 20px;
    background: url(../images/sprite.png) no-repeat;
    left:5px;
    top: 5px;
    }

顶部效果

这里写图片描述

topbanner和search的制作

html部分

    <!--topbanner部分-->
    <div class="topbanner">
    <div class="w">
    <img  alt=""src="images/topbanner.jpg">
    <a class="close-banner" href="javascript:;"></a>
    </div>
    </div>
    <!--topbanner部分结束-->
    <div class="w">
    <div class="logo">
    <a title="叮咚" class="jd-a" href="http://www.jd.com" target="_blank">Dawn</a>
    <div class="db11">
    <a href="#"><img  src="images/dong.gif" alt=""/></a>
    </div>
    </div>
    <div class="search">
    <!--input:text-->
    <input type="text" name="" id="" value="图书开抢"/>
    <button>搜索</button>
    </div>
    </div>

css部分

    /*topbanner start*/
    .topbanner {
    background-color: #8A25C6;
    }
    .close-banner {
    position: absolute;
    right: 0;
    top: 5px;
    width: 19px;
    height: 19px;
    background: url(../images/close.png) no-repeat;
    }
    .close-banner:hover {
    background-position: bottom;
    }
    .tp {
    position: relative;
    }
    /*topbanner end*/

    /*search左侧*/
    .logo {
    width: 360px;
    height: 75px;
    background-color: pink;
    float: left;
    padding-top: 25px;
    background: url(../images/logo.png) no-repeat 0 25px;
    position: relative;
    }

    .jd-a {
    display: block;
    width: 270px;
    height: 60px;
    text-indent: -2000em;
    }

    .db11 {
    position: absolute;
    width: 180px;
    height: 80px;
    background-color: pink;
    top: 10px;
    left: 168px;
    }
    /*search左侧结束*/

    /*搜索框的制作*/
    .search {
    width: 538px;
    height: 36px;
    float: left;
    /*padding和margin都可以，此处用margin更漂亮*/
    margin-top: 25px;
    }
    .search input {
    width: 450px;
    height: 32px;
    border: 2px solid #B61D1D;
    padding-left: 4px;
    color:#666;
    font: 14px/32px "microsoft yahei";
    float:left;
    }
    .search button{
    width: 80px;
    height: 36px;
    background-color: #B61D1D;
    float:left;
    font: 16px/36px "microsoft yahei";
    color:#fff;
    cursor:pointer;
    }

images素材

topbanner图：
这里写图片描述

search左侧图：
这里写图片描述

这里写图片描述

鼠标样式

cursor:pointer; 鼠标变成小手
cursor:default; 小白
cursor:text; 文本输入
cursor:move; 移动

效果图
这里写图片描述

网页布局思路：

给一个盒子：宽度高度；背景边框；位置

购物车的制作

html部分

    <div class="car">
    <a href="#">D的购物车</a>
    <span class="icon1"></span>
    <span class="icon2">></span>
    <span class="icon3">0</span>
    </div>
“span.icon$*3”可以快速打出以上代码，div也是一样

css部分

    .car {
    width: 96px;
    padding-left: 43px;
    /*有了行高就不需要高度了，height: 34px;*/
    /*background-color: blue;*/
    float:right;
    margin: 25px 65px 0 0;
    /*bd+*/
    border: 1px solid #DFDFDF;
    /*lh34px*/
    line-height: 34px;
    position: relative;
    }
    .icon1 {
    position:absolute;
    top: 10px;
    left: 20px;
    width: 16px;
    height: 13px;
    background: url(../images/sprite.png) no-repeat -1px -59px;
    }
    .icon2 {
    font: 400 13px/13px simsun;
    position: absolute;
    top: 13px;
    right: 15px;
    }
    .icon3 {
    position: absolute;
    width: 16px;
    height: 14px;
    background-color: #C81623;
    font-size: 12px;
    /*如果不规定行高，就会继承car的行高，0会掉下来*/
    line-height: 14px;
    /*tac*/
    text-align: center;
    /*在html里面的颜色不允许简写*/
    color: #fff;
    top: -4px;
    border-radius: 7px 7px 7px 0;
    }

border-radius 用来写圆角矩形，大小从左上角->右上角->右下角->左下角顺时针来写。

search框下面热门提示词的制作

html部分

    <div class="hotwords">
    <a href="#" class="col-red">11月11天</a>
    <a href="#">11.11秒杀</a>
    <a href="#">买2免1</a>
    <a href="#">Note5黑</a>
    <a href="#">12期免息</a>
    <a href="#">智能科技</a>
    <a href="#">清仓</a>
    <a href="#">国际服饰</a>
    </div>

注意：
（1）用a的原因是：此处不是导航栏不用写的特别正式所以不用li。
（2）行内元素一般只提左右不提上下margin-left margin-left,块内元素和行内块上下左右随便给.

CSS部分

    .hotwords {
    width: 500px;
    padding: 7px 0;
    float:left;
     }
    .hotwords a {
    margin-right: 8px;
    }

注意：盒子里有一个是浮动的，那个其中的所有盒子都要浮动，没浮动时字没被挡住的原因是字不会被压住，但实际上这个盒子已经被压住。

此部分详单与一共四个盒子：

①左边两个图片

②搜索栏

③购物车

④搜索热词

search和hotwords没有放一个盒子的原因：点hotwords时直接跳转页面，并不会显示在search栏，即search和hotwords内容并无关联，所以分为两个盒子。

头部部分 End

Dawn___
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实战与技巧
m0_72979912的博客
11-15 516
css实战与技巧 接 css基础教程
CSS高效开发实战
12-31
《CSS高效开发实战：CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本，确保所讲解的内容...
CSS实践详解总结
小小默：进无止境
05-13 576
【1】CSS选择器 ① 类选择器 1.后代选择 选择父类下面的所有后代。 .wrapper-item .layui-form-label{ width: 25%; } <div class="wrapper-item"> <label for="name" class="layui-form-label"> <span class="we-red">*</span>姓名 </label> </
CSS实战技巧
lightwine的博客
04-10 102
CSS初始化 不同浏览器对一些标签默认值不同，为照顾浏览器兼容性，我们要对CSS初始化。（称CSS reset） 每个网页都要首先进行CSS初始化 如 *{ margin:0; padding:0} 等 溢出文字省略号显示 1.单行文本溢出显示省略号-- 强制一行内显示文本 white-space:nowrap； /* 默认为normal自动换行 */ 超出部分隐藏 overflow:hidden; 文字...
CSS快速入门及简单实战
m0_73770225的博客
12-06 334
css语法结构，样式类型，选择器及盒子模型
CSS实战栗子
weixin_52629592的博客
06-20 201
运行结果如下: 运行结果如下: 运行结果如下:
HTML+Javascript+Css实战题
06-08
HTML+Javascript+Css实战题
CSS实战手册.zip
07-18
CSS实战手册 第四版(中文版+练习题),从基础知识入手。编写对 CSS 友好的 HTML 代码，包括现今的浏览器能识别的 HTML5 标签。为移动设备设计。创建对移动设备友好的网页，以便访客随时随地浏览。
HTML+CSS实战开发
07-01
也许你只会html和css基础理论知识，缺少实战，这是计算机技术学习的大忌，本课程按照企业开发的流程规范进行授课让你迈向实战开发第一步，学完课程后，你将对基础知识进一步巩固与加强，同时提升自己运用知识和实战...
CSS3实战与案例
01-24
css3 实战 案例 源码 css3 实战 案例 源码 css3 实战 案例 源码
html+css实战（5）
weixin_41761478的博客
03-24 1021
JQuery实战——表单验证 框架： + *{box-sizing：border-box} + wrap{margin:xx auto;（使居中）max-width:1080px;(设max-width方便日后调整} 单独定义wrap-sm{width：400px;} 封装Validator**： $(function){}相当于document.ready()：当加载完DOM之后再执行...
【京东商城首页实战4】topbanner制作
05-02 3522
接着做京东首页，上面已经做了导航条，接下来要做下面的部分，如图： 图1附上topbanner图片： 图2分析： 1.有一个通栏盒子，负责通栏背景，里面再有一个版心盒子，负责装内容。 2.topbanner图片不是个链接，所以可以直接插入图片。 3.关闭按钮可点击，是个a链接。当鼠标放到上面时，颜色改变。关闭按钮在盒子的右上角，用定位来做。1.插入图片和通栏背景HTML代码：<div cla
html5，css3实战
七元八元
08-19 4866
预览地址：预览 github源码：源码 1. 网页开发 HTML5：BEM开发模式，BEM代表块（Block），元素（Element），修饰符（Modifier）。 CSS3：过渡动画、帧动画 JS： 元素获取，事件响应处理 2. 准备 标注工具：像素大厨 雪碧图拼接：gopng 3. 开发 项目骨架： <!DOCTYPE html> <html ...
HTML+CSS提升小实战
HiterCoder
08-20 188
HTML+CSS提升小实战 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>几米简介</title> 5 ...
base.css
gxf_ming的博客
03-14 488
@charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin: 0; padding: 0; } fieldset, img, input, button { /*field
仿京东项目
冯龙天的博客
09-24 3137
仿京东商城
关于CSS的一些个人笔记（自学）
Jaymiii_的博客
09-14 233
CSS的权重 默认样式 可对应理解权重为： 0 关于权重的叠加问题： 继承的权重为0 权重会叠加。 例如： .top_banner div > div CSS的初始化（前置内容，清楚浏览器的影响） /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, f
html+css实战
最新发布
09-12
HTML CSS实战是一种通过实际项目来练习和应用HTML和CSS的方法。通过实际项目的练习，可以帮助你更好地理解和掌握HTML和CSS的技巧和使用方法。通常，HTML CSS实战项目包括多个页面，例如首页、列表页、详情页、个人中心等，还可能包括一些常见的组件和功能，如登录、注册弹框等。这些项目的目的是让你将HTML和CSS的知识运用到实际的页面设计和开发中，提升你的实践能力和技术水平。通过不断练习和实战，你可以逐渐提升自己的HTML和CSS技能，成为一名优秀的前端开发者。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值