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

一、前言

    经过第一天的练习后完成的页面的快速导航、顶部广告、搜索栏今天将继续完成下面的页面。

二、引入

    在一般的情况下页面是从左到右,从上到下依次进行布局的。可是由于可以将通用的样式封装以便于后面的使用所以今天我们完成页面的最下面部分。

三、重点内容

  ㈠ 相邻行内块元素的间距问题

    在布局的时候,相邻的行内块元素之间默认有几像素的外间距。只能用浮动来解决这个问题。

  ㈡ Border-radius: 边框半径

    这是CSS3的一个新属性,其作用是向元素添加圆角边框。他一共有四个值:左上 左下 右上 右下。四个值为元素宽度或是高度的一半的时候,会将元素变成圆形或是椭圆形,峰值只能到达宽度或是高度的一半。

  ㈢ 清除浮动

    由于子盒子设置了浮动脱离了标准流而造成了父盒子的高度塌陷这就是浮动造成的影响。而清除浮动并不是真正意义上的把所有的浮动都清除掉,而是把浮动所带来影响全部清除掉。(详细的可以在w3c上面查询)下面列举了清除浮动的四中方法:

    ① 给父盒子设置一个高度,其原理是用高度撑出子盒子浮动后失去的高度。

    ②  给父盒子设置overfflow:hidden属性,其原理是触发了BFC模式(BfC所牵扯知识太多请自行百度)。

    ③  在所有的元素后添加一个div为这个div设置clear:both属性,其原理是 运用clear属性隔断所有的浮动。

    ④  运用伪元素的方式,写一个clearfix类并为其写一个:after的伪元素,其原理与上相同也是运用了clear属性隔断所有的浮动。

  ㈣ 定位的元素的层级

    定位(相对和绝对或固定)的元素都有一个层级的属性或是概念。如果定位了的相邻多个元素,在同一个位置的话,后面的元素默认会压住前面的元素。如果同样是定位了的元素,默认他们的层级都是0,只不过后面的元素会压住前面的元素。如果想让当前的元素显示在后面的元素之上,这个时候就需要改变层级的关系,用z-index来改变。

  ㈤ 列表和background的符合属性

    ① 列表:列表分为三种分别是有序列表(<ol>)、无序列表(<ul>)、自定义列表(<dl>)。不同的列表有不同的样式

    ② background的符合属性内容:  

            background-color: 背景颜色  background-img: url()    链接 的图片

            background-repeat: 图片是否平铺  no-repeat  repeat-x  repeat-y

            background-position: 背景图片的位置  0  0

            background-attachment: 是否滚动

            background: 颜色  图片的链接  是否平铺  背景位置 是否滚动。

     background的属性是可以连写的并且没有顺序,也没有必写内容。

四、总结

    学习是个循序渐进的过程不进则退,在今天需要掌握的主要内容已经如上所列(没有基础的请参照w3c的Html,css基础)。今天的学习重点需要放在定位以及层级的概念上。

五、效果图

 

    

时间: 2024-10-22 14:55:15

基础复习(京东静态页面的实现)第二天的相关文章

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

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

京东静态页面第一天

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

京东静态页面第二天

第二天完成情况 只做了jd网页的顶部和底部的共同部分 今天所涉及的内容的介绍 1.1  开发前的准备工作 1.配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 2.建立项目文件夹   为了将与项目相关的文件放在一块,便于管理和以后的维护 包括与项目相关的一些文件 主页或是首页    index.html   default.html Css文件夹    css文件的 base.css     global.css Images文件夹  用来放置

仿京东静态页面

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

京东静态页面目录

效果图: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title></title> <link

浅谈php生成静态页面

一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权限限制等,但是,对应一些我们经常频频使用的文件,比方说,开发的新闻发布系统,我们不希望很多用户都读取数据库才显示结果,这样一方面消耗了服务器的资源,另一方面占去了浏览者大量可贵的响应时间,所有,有了"静态页面话"的做法,当前很多网站都采用这种技术,一般都是由管理后台控制,或者生成html直

C#语言和数据库技术基础复习

整理了下C#语言和数据库技术基础,作为复习资料 第一章 一.c#和JAVA对比:1.c#用命名空间(namespace)java用包(package) 2.引入命名空间或包的关键字C#用using,JAVA用import 3.程序入口:C#的Main()有四种形式static void Main(string[] args) static int Main(string[] args) static void Main() static int Main() JAVA的MAIN()有一种形式 4

只用table模仿一个静态页面

尝试只用table标签来模仿一个静态页面,这样做可以很好的增加对网页结构理解. 要尝试模仿的页面如下: 附上我自己写的代码,因为只是用了HTML,没有用到CSS和js,所以有些样式写出来和原图有些出入 <!DOCTYPE html> <html> <head> <title>只用table来模仿一个网页</title> <meta charset="utf-8"> </head> <body>

过滤器为JSP文件生成静态页面

用过滤器为JSP文件生成静态页面,这只是一个简单的实例,客户端浏览器第一次请求JSP页面时,服务器将生成对应的HTML文件,以后访问同一JSP文件,将转为访问生成的HTML文件.一.过滤器 package com.kenfor.lyb.toHtmlfilter; import java.io.*; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import javax.s