2020年12月_知远同学

12月 11月 10月 08月 07月

原创 CSS背景

一背景1、背景颜色background-color：2、背景图片background-image:url(路径），路径可以加引号，避免有些东西显示不出来。背景颜色和背景图片可以同时设置，背景颜色将会成为图片的背景色。如果背景图片小于元素，背景图片会自动在元素中平铺。如果背景图片比元素大，将会有一部分背景图片无法显示。如果背景图片和元素一样大，则会正常显示。background-repeat用来设置背景的重复方式：可选值：repeat 默认值，背景会沿着X轴和Y轴双方向重复；repeat-

2020-12-30 23:14:36 192

原创模仿京东顶部导航条2（带下拉框的制作）

直接上代码，要求见：模仿京东顶部导航条，这次带下拉框的制作。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东顶部导航条练习3</title> &l

2020-12-23 22:29:33 1267

原创模仿京东顶部导航条

任务：模仿京东顶部导航条，只作出样式，下来框不做。主要考察布局、图标字体的使用。案例中涉及的图标字体下载于阿里巴巴iconfont网站，该网站的图标字体数量比较多，适合自己练习使用，如果商用最好提前练习作者，确认版权之后在使用。字体已经下载好，在我的博客资源中心可以下载到，链接：https://download.csdn.net/download/weixin_47401101/13724922代码：<!DOCTYPE html><html lang="en"><

2020-12-18 23:23:20 985 2

原创 CSS行高、字体简写属性、文本样式学习笔记

目录一行高二字体的简写属性三文本的样式一行高行高：line-height，指的是文字占有的实际高度，可以通过line-height设置行高。行高可以直接指定一个大小，单位可以是px 或者 em，也可以直接设置一个整数，将是字体大小的倍数；line-height:2;表示行高是字体大小的2倍。默认是1.33；字体框：字体存在的格子，设置font-size是设置字体框的大小。行高会在字体框的上下平均分配。一般会将行高设置为和高度一样的值，使得单行字体居中。行间距=行高-字体大小。二

2020-12-17 10:12:26 1025

原创 CSS字体和图标字体

目录一字体font二图标字体三阿里巴巴iconfont图标字体使用方法一字体font字体相关的样式：color：用来设置字体的颜色；严格意义上color设置前景色，一般都是这样设置；font-size:设置字体的大小，和font-size相关的单位：em相当于当前元素的一个font-size；rem相当于根元素的一个font-size;font-family：指定字体族，字体格式：可选值：serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体），这不是指

2020-12-16 23:10:23 229

原创京东首页轮播图练习

没有js的加持，有些效果没有实现，本案例练习的重点是定位和布局，后面学习了js之后继续完善。理解相对定位和绝对定位的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东首页轮

2020-12-16 00:39:42 1908

原创 CSS定位相关知识学习笔记

这里写目录标题一定位position1、相对定位2、绝对定位一定位positionposition定位，定位是一种更高级的布局手段；通过定位将一个元素摆放到任意位置；使用position属性来设置定位：position可选值：static 默认值，元素是静止的，没有开启定位，写与不写没有区别；relative 开启元素的相对定位；absolute 开启元素的绝对定位；fixed 开启元素的固定定位；sticky 开启元素的粘滞定位；1、相对定位当position设置为relativ

2020-12-14 23:02:26 135

原创 CSS浮动与高度塌陷的解决方法

这里写目录标题一浮动一浮动通过浮动将一个元素，向其父元素向左或者向右移动，使用float属性设置元素的浮动。float的可选值：none 默认值，不浮动；left 元素向左浮动；right 元素向右浮动。元素设置浮动以后，水平布局的等式不需要强制成立了，等式失效了。元素设置浮动以后，完全从文档流中脱离，不在占用文档流的位置。所以元素下边在文档流中的元素会自动向上移动。浮动的效果可以使元素横向排列，浮动的特点如下：1、完全脱离文档流，不占用文档流的位置；2、设置浮动以后，元素会向父元素的

2020-12-11 23:26:29 592

原创简单网页布局练习

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页简单布局</title> <link rel="stylesheet" href="reset.css"

2020-12-10 16:53:10 420

原创尚硅谷模拟w3school首页导航条练习

模拟w3school网站首页导航条，使用到css中float属性，使得元素水平布局。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>w3school导航条</ti

2020-12-10 16:15:08 457

原创 CSS盒子的大小、轮廓、阴影、圆角设置方法

目录一盒子的大小一盒子的大小默认情况下盒子的大小由内容区、内边距和外边框共同决定的，但是也是可以通过属性进行设置。box-sizing用来设置盒子尺寸的计算方法（设置width和height的作用）：可选值：box-sizing:content-box;默认值，宽度和高度设置内容区的大小；box-sizing:border-box;边框盒子，宽度和高度设置整个盒子可见框的大小，包括内容区、内边距、外边框的大小；...

2020-12-08 23:55:51 6835

原创尚硅谷模拟网易新闻列表练习

要求网址：https://news.163.com/代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易新闻列表案例练习2</title> <

2020-12-08 16:39:41 189

原创 css著名的 Meyer Reset（重置）

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, .

2020-12-06 18:49:02 437

原创尚硅谷模拟京东首页图片列表

要求：模拟京东首页，使用css模拟该图片列表。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片列表</title> <link rel

2020-12-03 23:44:33 177