CSS - 随笔分类 - zou-ting-rong

css实现一个电影卡片

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./reset.css"> 7 <link rel="sty 阅读全文

posted @ 2020-11-21 21:36 zou-ting-rong 阅读(318) 评论(0) 推荐(0)

css背景

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /* 8 background-image设置背景图片 9 -可以同事设置背景图片和背景颜色 10 阅读全文

posted @ 2020-11-21 16:20 zou-ting-rong 阅读(80) 评论(0) 推荐(0)

css实现京东顶部导航条

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./css/all.css"> 7 <link rel="s 阅读全文

posted @ 2020-11-21 15:20 zou-ting-rong 阅读(959) 评论(0) 推荐(0)

css盒布局-省份选择盘的实现

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .disk { 8 width: 400px; 9 padding:10px; 10 resize 阅读全文

posted @ 2020-11-20 22:32 zou-ting-rong 阅读(201) 评论(0) 推荐(0)

css字体的属性

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 border:1px red solid; 9 /* 10 font可以设置字体的阅读全文

posted @ 2020-11-18 21:04 zou-ting-rong 阅读(95) 评论(0) 推荐(0)

css行高

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div { 8 font-size:50px; 9 /* 可以将行高设置为和高度一样的值，使单行文阅读全文

posted @ 2020-11-18 20:45 zou-ting-rong 阅读(225) 评论(0) 推荐(0)

CSS定位(position)

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 font-size:60px; 9 } 10 .box1 { 11 width: 阅读全文

posted @ 2020-11-17 21:49 zou-ting-rong 阅读(109) 评论(0) 推荐(0)

CSS-clear属性的作用

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 height:100px; 10 backgrou 阅读全文

posted @ 2020-11-16 19:51 zou-ting-rong 阅读(594) 评论(0) 推荐(0)

CSS浮动布局带来的高度塌陷以及其解决办法

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 1 阅读全文

posted @ 2020-11-16 12:22 zou-ting-rong 阅读(351) 评论(0) 推荐(0)

CSS网页的布局

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./reset.css"> 7 <style> 8 head 阅读全文

posted @ 2020-11-16 11:20 zou-ting-rong 阅读(87) 评论(0) 推荐(0)

css导航条的设计

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./reset.css"> 7 <style> 8 /*设置阅读全文

posted @ 2020-11-16 11:18 zou-ting-rong 阅读(170) 评论(0) 推荐(0)

CSS浮动

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 height:100px; 10 backgrou 阅读全文

posted @ 2020-11-13 20:43 zou-ting-rong 阅读(93) 评论(0) 推荐(0)

CSS轮廓和圆角

摘要：1 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 .box1{ 9 width:100px; 10 height:100px; 11 backg 阅读全文

posted @ 2020-11-13 20:41 zou-ting-rong 阅读(209) 评论(0) 推荐(0)

CSS盒子的尺寸

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 height:100px; 10 backgrou 阅读全文

posted @ 2020-11-13 20:39 zou-ting-rong 阅读(271) 评论(0) 推荐(0)

CSS中的块级元素，行内元素，行内块元素

摘要：博客转载于：https://blog.csdn.net/swebin/article/details/90405950 块级元素 block 块级元素，该元素呈现块状，所以他有自己的宽度和高度，也就是可以自定义width和Height，块元素独占页面的一行，可以作为容器使用，可以容纳块级元素和行内元阅读全文

posted @ 2020-11-12 11:50 zou-ting-rong 阅读(661) 评论(0) 推荐(0)

导航栏的设计

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="./Nomalize.css"> 7 </head> 8 < 阅读全文

posted @ 2020-11-11 21:59 zou-ting-rong 阅读(104) 评论(0) 推荐(0)

CSS行内元素盒模型

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:200px; 9 height:200px; 10 backgrou 阅读全文

posted @ 2020-11-11 17:44 zou-ting-rong 阅读(289) 评论(0) 推荐(0)

CSS垂直布局

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1,.box2{ 8 width:200px; 9 height:200px; 10 } 阅读全文

posted @ 2020-11-11 16:43 zou-ting-rong 阅读(293) 评论(0) 推荐(0)

CSS水平布局

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 width:800px; 9 height:200px; 10 border: 阅读全文

posted @ 2020-11-10 21:53 zou-ting-rong 阅读(417) 评论(0) 推荐(0)

CSS文档流

摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box1{ 8 width:100px; 9 background:yellow; 10 } 1 阅读全文

posted @ 2020-11-10 21:00 zou-ting-rong 阅读(74) 评论(0) 推荐(0)

随笔分类 - CSS

公告