CSS小练习
关注
分享
扫一扫
花里梦雨
心之所向，素履以往。
展开
-
妙蛙——抛弃float，使用弹性盒设置的导航条能有多简单
弹性容器： display: flex;（块级）弹性元素：弹性容器的直接子元素，使用属性：伸展：flex-grow: 1<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: o; padding: 0; list-style原创 2022-04-04 22:43:29 · 488 阅读 · 0 评论 -
用CSS呈现轮播图效果
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../reset.css"> <meta charset="UTF-8"> <title>轮播图</title> <style> .box1{ width: 132px; heigh原创 2022-01-27 20:51:45 · 1007 阅读 · 0 评论 -
用CSS实现简单的网页布局
用代码实现这样一个简单的网页布局：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <title>Surymy</title> <style> header,main,footer{原创 2021-12-29 17:11:08 · 1120 阅读 · 0 评论 -
CSS——餐厅选择器答案
保密~原创 2021-11-02 16:30:32 · 447 阅读 · 0 评论 -
CSS——餐厅选择器
链接：https://flukeout.github.io/原创 2021-11-02 11:12:44 · 227 阅读 · 0 评论 -
CSS小练习1——显示三个图片列表
就是说左边和右边强行一致（狗头）大概是最笨的方法了……<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test2</title> <link rel="stylesheet" href="../resrt.css"></head><style> .box1{原创 2021-11-18 23:03:47 · 1016 阅读 · 0 评论 -
CSS小练习2——新闻栏的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test3</title> <link rel="stylesheet" href="../reset.css"></head><style> .box1{ margin:20px; font-.原创 2021-11-18 23:52:11 · 1157 阅读 · 0 评论 -
CSS小练习4——w3School导航栏
目录初始效果及代码模仿W3School的导航栏（绿色方框内的内容）初始效果及代码代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="../reset.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-12-29 14:01:06 · 543 阅读 · 0 评论 -
CSS小练习3——网页左侧导航栏
这个难道真的这么简单吗？？先上效果图，不能说一模一样，只能说是毫无差别：. 我写的代码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test1</title> <link rel="stylesheet" href="../reset.css"> <style>原创 2021-11-20 11:46:04 · 4459 阅读 · 0 评论