静态页面实例-京东商城02

11. 标准流中的间距问题

布局的时候,我们会遇到以下几种情况:

1. 相邻的行内块元素之间有默认几个像素的间距;

2.行内元素之间会出现空格合并现象;

当遇到上述情况时,需要使用浮动来将这些多余的间隔清除,使布局更加紧凑。

12. border-radius 设置边框半径

此属性为css3中的,可以设置一个矩形或正方形的弧度。

border-radius为复合属性,分别可以设置四个角的圆弧半径,顺序为:左上、右上、右下、左下。

这四个值具有上限,其峰值为宽度或高度的一半(取两个值中的最小值),当这四个值到达峰值时,会将元素变成圆形或者椭圆形。

13. 元素的margin值

在布局中需要个各种元素设置margin的值,而对于行内元素来说,左右的margin值可以起左右,但是上下的margin值是不起左右的。

14. 清除浮动

在个元素设置浮动时,即将元素脱离了标准流,可能或出现布局混乱的情况,所有我们需要使用清除浮动来将布局归整。

可以满足清除浮动的方法有以下几种:

1. 给父盒子设置一个固定的高度;

2. 在所有子盒子的下方增加一个div,并给该div设置clear:both;的属性;

3. 给父盒子设置overflow:hidden;的属性;

4. 伪元素或者双伪元素清除法:

.clearfix:before, .clearfix:after {
    /*清除浮动,最好最标准的写法*/
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/  /*兼容IE6下的写法*/
}

15. 定位元素的层级

定位(固定、绝对或相对定位)的元素都有一个层级的属性。如果对相邻的多个元素设置了同一个定位,这些元素的层级都默认为0,但是后面的元素会覆盖掉前面的元素。如果想让前面的元素在后面的元素之上,这个时候就需要改变元素的层级关系。

用z-index属性来实现,z-index的取值范围为0到无穷大。

时间: 2024-10-08 04:25:17

静态页面实例-京东商城02的相关文章

静态页面实例-京东商城01

在完成整个实例过程中遇到的知识点,可能会出现知识点比较跳跃,后面在做知识点的归整. 1. 开发前的准备工作 1.1 熟悉开发环境 常用的开发环境:sublime,webstorm,vscode,Hbuilder,atom等(我现在学习期间使用的是webstorm) 1.2 建立项目文件夹包括与项目相关的文件 1.2.1 主页或是首页:index.html或default.html 1.2.2css文件夹:存放stylesheet文件,常命名为base.css或global.css 1.2.3im

PHP生成静态页面的方法

在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存等实现页面静态化,今天就以PHP实例教程形式讨论PHP生成静态页面的方法...."><LINKhref="http://www.php100.com//statics/st 在PHP网站开发中为了网站推广和SEO等需要,需要对网站进行全站或局部静态化处理,PHP生成静态HTML页面有多种方法,比如利用PHP模板.缓存等实现页面静态化

2016最新京东商城首页静态模板下载

2016最新京东商城首页静态模板下载 预览 百度云盘下载

基础复习(京东静态页面的实现)第一天

一.前言 作为一个技术小白决定记录下自己前端学习过程的点点滴滴,欢迎各为大神轻喷! 二.引入 前端最为基础的就是Html.css.js,为了巩固并且加强自己的基础所以挑选出了京东的静态页面作为这三天的复习内容!在第一天中我首先完成的是页面的快速导航.头部广告.搜索栏三个基础页面! 三.重点内容 ㈠ 开发前的准备工作: 在开始一个完整的项目之前首先要做的并不是着急的去写代码,完成项目前的准备工作.项目的准备工作可以分为以下几个部分 ① 配置开发环境     ② 建立项目文件夹     ③css文件

京东商城注册页面使用的正则表达式

下面是我在京东商城注册页面找到的一组,正则表达式,验证规则比较准确,包括几乎包括所有常用的规则,欢迎大家使用! decmal: "^([+-]?)\\d*\\.\\d+$", //浮点数 decmal1: "^[1-9]\\d*.\\d*|0.\\d*[1-9]\\d*$", //正浮点数 decmal2: "^-([1-9]\\d*.\\d*|0.\\d*[1-9]\\d*)$", //负浮点数 decmal3: "^-?([1-9]

京东静态页面第一天

书写页面前的准备 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 Base.css     global.css Images文件夹  用来放置网站中的所有的图片Js文件 音频或是视频文件 3. 样式初始化 我们的结构中的标签都有默

仿京东静态页面

运用到的知识点儿:css sprites,css reset,定位,margin负值的妙用,tab选项卡,轮播图,jquery插件开发... css sprites: css reset:统一每个浏览器默认的样式 定位:购物车上的小红图标,以及直降图标 margin负值的妙用:溢出隐藏,边框隐藏,左右结构 左右结构都有左边框,但是因为超出夫容器,设置溢出隐藏,使得左边边框被隐藏 tab选项卡:特价商品 轮播图: <!--index.html --> <!DOCTYPE html>

[freemarker篇]02.生成HTML的静态页面

昨天完成了一部分的今天在上次的基础上,完成完成生成HTML静态页面的操作,中间会涉及一点标签的简单使用.今天的代码有一丢丢的对付的感觉!抱歉了,直接就上代码吧!求原谅! 项目结构目录如下: 第一步,新建一个类com.shxt.model.User package com.shxt.model; public class User { private String account; private Integer age; public User() { } public User(String

DataTables学习:从最基本的入门静态页面,使用ajax调用Json本地数据源实现前端开发深入学习,根据后台数据接口替换掉本地的json本地数据,以及报错的处理地方,8个例子(显示行附加信息,回调使用api,动态显示和隐藏列...),详细教程

一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错的地方. 官方网站(中文):http://datatables.club/ 官方网站:https://www.datatables.net/  二.简单的例子 怎样简单地使用DataTables?使用下方简单的几行代码,一个方法初始化table. $(document).ready(function