CSS基础学习案例

article/2025/11/11 13:36:07

CSS–小米商城案例

小米商城案例目录

    • CSS--小米商城案例
    • 1.内容回顾
    • 2.案例顶部菜单
    • 3.二级菜单
      • 3.1 划分区域
      • 3.2搭建骨架
    • 4.整合 顶部菜单 + 二级菜单
    • 小结
    • 5. 推荐菜单
      • 5.1整合案例如下
      • 5.2 小结
    • 6.CSS进阶知识点
      • 6.1 hover（伪类）
      • 6.2 after（伪类）
      • 6.3 position
        • 1. fixed
          • 案例：返回顶部
          • 案例：dilog
        • 2.relative和absolute
      • 整合案例：

1.内容回顾

  • HTML标签

    固定格式，记住标签长什么样子，例如：
h/ div/ span/ a/ img/ ul/ li/ table/ input/ form

  • CSS样式

    • 引用CSS：标签，头部， 文件

      .xx{ 类.... !important
}
<div class='xx xx'></div>

    • CSS样式

      高度/宽度/块级or行内or块级行内/浮动/字体/文字/内边距/外边距浮动<div style="clear: both"></div>   关于边距-body自带边距 margin：0;- 区域居中 margin：0 auto;

    • 页面布局

      根据你看到的页面把他们划分成很多小区域，再去填充样式

2.案例顶部菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.container{width: 980px;margin: 0 auto;}.header{color: #b0b0b0;background: #333;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;margin-right: 5px;font-size: 12px;text-decoration: none;}.header a:hover{color:white;}.header .menu{float: left;}.header .account{float: right;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米商城</a><a href="https://home.miui.com/">MIUI</a><a href="https://iot.mi.com/">LOT</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear: both"></div></div></div>
</body>
</html>

3.二级菜单

3.1 划分区域

在这里插入图片描述

3.2搭建骨架

三个区域logo,sub-menu，sub-search

<div class="sub-header"><div class="container"><div class="logo"></div><div class="sub-menu"></div><div class="sub-search"></div><div style="clear: both"></div></div></div>
</div>

总和：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.container{width: 980px;margin: 0 auto;}.sub-header{height: 100px;}.sub-header .container .logo{float: left;width: 243px;height: 100px;}.sub-header .container .logo a{display: inline-block;margin-top: 22px;}.sub-header .sub-menu a{display: inline-block;line-height: 100px;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .sub-menu a:hover{color: #ff6700;}</style>
</head>
<body><div class="sub-header"><div class="container"><div class="logo"><a href="https://www.mi.com/"><img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/></a></div><div class="sub-menu"><a href="https://www.mi.com/shop">Xiaoi手机</a><a href="https://www.mi.com/shop">Redmi红米</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a></div><div class="sub-search"></div><div style="clear: both"></div></div></div>
</body>
</html>

4.整合 顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}.container{width: 980px;margin: 0 auto;}.header{color: #b0b0b0;background: #333;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;margin-right: 5px;font-size: 12px;text-decoration: none;}.header a:hover{color:white;}.header .menu{float: left;}.header .account{float: right;}.sub-header{height: 100px;}.sub-header .container .logo{float: left;width: 243px;height: 100px;}.sub-header .container .logo a{display: inline-block;margin-top: 22px;}.sub-header .sub-menu a{display: inline-block;line-height: 100px;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .sub-menu a:hover{color: #ff6700;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米商城</a><a href="https://home.miui.com/">MIUI</a><a href="https://iot.mi.com/">LOT</a></div><div class="account"><a>登录</a><a>注册</a><a>消息通知</a></div><div style="clear: both"></div></div></div><div class="sub-header"><div class="container"><div class="logo"><a href="https://www.mi.com/"><img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/></a></div><div class="sub-menu"><a href="https://www.mi.com/shop">Xiaoi手机</a><a href="https://www.mi.com/shop">Redmi红米</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a></div><div class="sub-search"></div><div style="clear: both"></div></div></div>
</body>
</html>

小结

  • a标签是行内标签，行内标签的高度，内外边距， 默认无效

  • 垂直方向居中

    • 文本 + line-height
    • 图片 + 边距

  • a标签默认有下划线，去除 + text-decoretion : none

  • 鼠标放上后该变标签样式

    .c1:hover{color: xxx
}
a:hover{colol:xxxxx:xxx
}

5. 推荐菜单

5.1整合案例如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小凡的小米商城案例</title><style>body{margin: 0;}img{height: 100%;width: 100%;}.container{width: 1226px;margin: 0 auto;}.left{float: left;}.header{color: #b0b0b0;background: #333;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;margin-right: 5px;font-size: 12px;text-decoration: none;}.header a:hover{color:white;}.header .menu{float: left;}.header .account{float: right;}.header .account a{text-decoration: none;}.sub-header{height: 100px;}.sub-header .container .logo{float: left;width: 243px;height: 100px;}.sub-header .container .logo a{display: inline-block;margin-top: 22px;}.sub-header .sub-menu a{display: inline-block;line-height: 100px;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .sub-menu a:hover{color: #ff6700;}.news .channle{width: 228px;height: 164px;padding: 3px;background-color: #5f5750;}.product{width: 1224px;height:460px;margin-bottom: 15px;}.news .item-list{width: 316px;height: 170px;margin-left: 14px;}.channle-list{width: 76px;height: 82px;float: left;}.channle-list img{height: 24px;width: 24px;margin: 0 auto 4px;display: block;}.channle-list a{text-align: center;font-size: 12px;padding-top: 18px;display: block;color: white;opacity: .7;text-decoration: none;}.channle-list a:hover{opacity: 1;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米商城</a><a href="https://home.miui.com/">MIUI</a><a href="https://iot.mi.com/">LOT</a></div><div class="account"><a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">登录</a><a href="https://cn.account.xiaomi.com/fe/service/register?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN&_uRegion=CN">注册</a><a>消息通知</a></div><div style="clear: both"></div></div></div><div class="sub-header"><div class="container"><div class="logo"><a href="https://www.mi.com/"><img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/></a></div><div class="sub-menu"><a href="https://www.mi.com/shop">Xiaoi手机</a><a href="https://www.mi.com/shop">Redmi红米</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a></div><div class="sub-search"></div><div style="clear: both"></div></div></div><div class="news"><div class="container"><div class="product"><a href="https://www.mi.com/"><img src="tp1.jpg" alt=""></a></div><div class="channle left"><div class="channle-list"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"><img src="l1.png" alt=""/><span >保障服务</span></a></div><div class="channle-list"><a href="https://qiye.mi.com/"><img src="l2.png" alt=""/><span >企业团购</span></a></div><div class="channle-list"><a href="https://www.mi.com/shop/order/fcode"><img src="l3.png" alt=""/><span >F码通道</span></a></div><div class="channle-list"><a href="https://10046.mi.com/"><img src="l4.png" alt=""/><span >米粉卡</span></a></div><div class="channle-list"><a href="https://www.mi.com/a/h/16769.html"><img src="l5.png" alt=""/><span >以旧换新</span></a></div><div class="channle-list"><a href="https://account.xiaomi.com/fe/service/login/password?sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN"><img src="l6.png" alt=""/><span >话费充值</span></a></div></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp2.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp3.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp4.jpg" alt=""></a></div><div style="clear: both"></div></div></div>
</body>
</html>

5.2 小结

设置透明度opacity,其值由0-1，值越大越接近本色
在这里插入图片描述

6.CSS进阶知识点

6.1 hover（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: #ff6700;font-size: 20px;}.c1:hover{color: aquamarine;font-size: 50px;}.c2{height: 300px;width: 500px;border: 1px solid indianred;}.c2:hover{border: 5px solid greenyellow;}.download{display: none;}.app:hover .download{display: block;}</style>
</head>
<body>
<div class="c1">湖南</div>
<div class="c2">长沙</div><div class="app"><div>下载APP</div><div class="download"><img src="df.png" /></div>
</div>
</body>
</html>

6.2 after（伪类）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1:after{content: "真可爱";font-size: 20px;color: #ff6700;}</style>
</head>
<body>
<div class="c1">大凡</div>
<div class="c1">小灿</div>
</body>
</html>

作用：去除文档流

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.clearfix{content: "";display: block;clear: both;}.item{float: left;border: 2px solid greenyellow;}</style>
</head>
<body>
<div class="clearfix"><div class="item">xxx</div><div class="item">xxx</div><div class="item">xxx</div><div class="item">xxx</div>
</div>
</body>
</html>

6.3 position

  • fixed
  • relative
  • absolute

1. fixed

作用：固定在窗口的某个位置（绝对值）

案例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小凡的小米商城案例</title><style>body {margin: 0;}img {height: 100%;width: 100%;}.back {position: fixed;width: 60px;height: 60px;border: 2px solid burlywood;right: 20px;bottom: 100px;}</style>
</head>
<body><div style="background-color: aquamarine ;width: 3000px;height: 3000px"></div>
<div class="back">backtop
</div>
</body>
</html>
案例：dilog
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.dilog{position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;}.mask{background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;}</style>
</head>
<body>
<div style="height: 1000px; background-color: #ff6700"></div><div class="mask"></div><div class="dilog"></div>
</body>
</html>

2.relative和absolute

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 300px;width: 500px;border: 2px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: aquamarine;position: absolute;right: 30px;bottom: 30px;}</style>
</head>
<body>
<div class="c1"><div class="c2"></div>
</div>
</body>
</html>

整合案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小凡的小米商城案例</title><style>body{margin: 0;}img{height: 100%;width: 100%;}.container{width: 1226px;margin: 0 auto;}.left{float: left;}.header{color: #b0b0b0;background: #333;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;margin-right: 5px;font-size: 12px;text-decoration: none;}.header a:hover{color:white;}.header .menu{float: left;}.header .account{float: right;}.header .account a{text-decoration: none;}.app{position: relative;}.download{position: absolute;display: none;}.app:hover .download{display: block;}.sub-header{height: 100px;}.sub-header .container .logo{float: left;width: 243px;height: 100px;}.sub-header .container .logo a{display: inline-block;margin-top: 22px;}.sub-header .sub-menu a{display: inline-block;line-height: 100px;padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.sub-header .sub-menu a:hover{color: #ff6700;}.news .channle{width: 228px;height: 164px;padding: 3px;background-color: #5f5750;}.product{width: 1224px;height:460px;margin-bottom: 15px;}.news .item-list{width: 316px;height: 170px;margin-left: 14px;}.channle-list{width: 76px;height: 82px;float: left;}.channle-list img{height: 24px;width: 24px;margin: 0 auto 4px;display: block;}.channle-list a{text-align: center;font-size: 12px;padding-top: 18px;display: block;color: white;opacity: .7;text-decoration: none;}.channle-list a:hover{opacity: 1;}</style>
</head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com/shop">小米商城</a><a href="https://home.miui.com/">MIUI</a><a href="https://iot.mi.com/">LOT</a><a href="https://iot.mi.com/" class="app">下载APP<img src="download.png" alt="" class="download"/></a></div><div class="account"><a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">登录</a><a href="https://cn.account.xiaomi.com/fe/service/register?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN&_uRegion=CN">注册</a><a>消息通知</a></div><div style="clear: both"></div></div></div><div class="sub-header"><div class="container"><div class="logo"><a href="https://www.mi.com/"><img src="logo-mi2.png" alt="" style="width: 56px; height: 56px"/></a></div><div class="sub-menu"><a href="https://www.mi.com/shop">Xiaoi手机</a><a href="https://www.mi.com/shop">Redmi红米</a><a href="https://www.mi.com/shop">电视</a><a href="https://www.mi.com/shop">笔记本</a><a href="https://www.mi.com/shop">平板</a><a href="https://www.mi.com/shop">家电</a></div><div class="sub-search"></div><div style="clear: both"></div></div></div><div class="news"><div class="container"><div class="product"><a href="https://www.mi.com/"><img src="tp1.jpg" alt=""></a></div><div class="channle left"><div class="channle-list"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"><img src="l1.png" alt=""/><span >保障服务</span></a></div><div class="channle-list"><a href="https://qiye.mi.com/"><img src="l2.png" alt=""/><span >企业团购</span></a></div><div class="channle-list"><a href="https://www.mi.com/shop/order/fcode"><img src="l3.png" alt=""/><span >F码通道</span></a></div><div class="channle-list"><a href="https://10046.mi.com/"><img src="l4.png" alt=""/><span >米粉卡</span></a></div><div class="channle-list"><a href="https://www.mi.com/a/h/16769.html"><img src="l5.png" alt=""/><span >以旧换新</span></a></div><div class="channle-list"><a href="https://account.xiaomi.com/fe/service/login/password?sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN"><img src="l6.png" alt=""/><span >话费充值</span></a></div></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp2.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp3.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp4.jpg" alt=""></a></div><div style="clear: both"></div></div></div>
</body>
</html>
llowup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=3pa5Zba%2FIHtDJzbFwCNYwaYP0sU%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN"><img src="l6.png" alt=""/><span >话费充值</span></a></div></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp2.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp3.jpg" alt=""></a></div><div class="item-list left"><a href="https://www.mi.com/redminote11t-pro"><img src="tp4.jpg" alt=""></a></div><div style="clear: both"></div></div></div>
</body>
</html>

http://chatgpt.dhexx.cn/article/x0j8pF3l.shtml

相关文章

html/css 个人网站实例(一)

html/css 个人网站实例(一)

显示效果 HTML代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>alalasheep的个人网站</titl…
阅读更多...
CSS实例 简单案例

CSS实例 简单案例

CSS文件 注意改变图片的样式时&#xff0c;是要加给图片所在的标签 比如p /* 整体 */ body {font: 16px/28px "Microsoft YaHei"; }/* 大标题 */ h1 {font-weight: 600;text-align: center; }/* 连接a */ a {text-decoration: none; }/* 时间 来源 */ .scor {font-…
阅读更多...
CSS案例（1）

CSS案例（1）

写在前面&#xff1a;本篇所有 css 均使用内嵌式引入。若想使用外链式&#xff0c;需先新建 .css 文件&#xff0c;再通过 link 标签引入到 html 里&#xff0c;样式部分的代码基本不用做其他修改。 目录 1 导航栏样式 2 商品展示页面 3 简单新闻页面 4 布局样式 1 导航栏样…
阅读更多...
小案例CSS

小案例CSS

代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"> <meta name"viewport" content"widthde…
阅读更多...
CSS常见样式的介绍和使用（附加案例）

CSS常见样式的介绍和使用（附加案例）

CSS样式 一、css介绍 层叠样式表(英文全称&#xff1a;Cascading Style Sheets) ​ 是一种用来表现HTML标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&#xff0c;还可以…
阅读更多...
CSS 示例

CSS 示例

基础内容 引入样式表&#xff1a;<link rel"stylesheet" href"test.css"> em&#xff1a;相对大小单位 选择器 示例说明#id选择所有类.clsss选择所有类p选择所有p标签&#xff0c;可以加逗号分组p em后代选择器&#xff0c;选中p标签中所有em标签…
阅读更多...
CSS-200个小案例（一）

CSS-200个小案例（一）

最近我在youtube上跟着大神学习200个CSS小案例&#xff0c;作者Online Tutorials 编码的内容很实用&#xff0c;案例中涉及定位、变换、动画等概念&#xff0c;适合进一步学习和巩固CSS知识&#xff0c;能帮助我们实现页面的特效。 youtube视频链接&#xff1a;https://www.you…
阅读更多...
30个超棒的CSS应用实例

30个超棒的CSS应用实例

这 篇文章是很早之前在博客园看到的&#xff0c;收藏在网摘里&#xff0c;今天再看发现实在很棒&#xff0c;转载过来方便以后参考用&#xff0c;最棒的地方是这些效果的实现都只是利用CSSHTML 来实现的&#xff0c;基本上没有用到什么FLASH或JS脚本&#xff0c;大家也可以看看…
阅读更多...
【CSS实例】

【CSS实例】

学习目标&#xff1a; css样式学习、总结&#xff0c;知识巩固 学习内容&#xff1a; 在这里我将会发布一些自己学习过程中完成的css实例&#xff0c;可能是跟着网上学习的练习作品&#xff0c;也可能是自己的随意的一个想法。每个作品中会列出编写思路&#xff0c;和编写过程…
阅读更多...
codewar代码练习1——8级晋升7级

codewar代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…
阅读更多...
codewar python 遗忘点

codewar python 遗忘点

2019独角兽企业重金招聘Python工程师标准>>> 1、计算字符串中特定字符串出现的次数 s this is a new technology,and I want to learn this. print(s.count(this, 0, len(s))) #目标字符串区分大小写 2、数字左边补0的方法,字符串补空格 #python中有一个zfil…
阅读更多...
Codewar - Bit Counting

Codewar - Bit Counting

2019独角兽企业重金招聘Python工程师标准>>> Write a function that takes an (unsigned) integer as input, and returns the number of bits that are equal to one in the binary representation of that number. Example: The binary representation of 1234 is…
阅读更多...
codewar 代码练习1——8级晋升7级

codewar 代码练习1——8级晋升7级

最近发现一个不错的代码练习网站codewar&#xff08;http://www.codewars.com&#xff09;。注册了一个账号&#xff0c;花了几天的茶余饭后时间做题&#xff0c;把等级从8级升到了7级。本文的目的主要介绍使用感受及相应题目&#xff0c;可供大家参考。 新人注册为8级&#xf…
阅读更多...
codewar 代码练习2——7级晋升6级

codewar 代码练习2——7级晋升6级

7级晋升到6级的过程中以做6级题以及以前未完成的题目为主&#xff0c;一般选择算法题或者基础题。相比之前从8级升级7级&#xff08;参见此博客&#xff1a;http://blog.csdn.net/m0_37324740/article/details/78408249&#xff09;的难度有所提前&#xff0c;并且一些题目结合…
阅读更多...
R数据分析，codewar的年终总结，和一周年总结

R数据分析，codewar的年终总结，和一周年总结

前阵子单位各个部门都在要求弄总结&#xff0c;想想自己这个公众号也写了快一年了&#xff0c;专门回去翻了翻&#xff0c;这个公众号发布的第一篇文章是在2021年的1月17日&#xff0c;我想2022年的1月17日我就把现在敲的文字推出来吧&#xff0c;也算是一个年终和周年总结。 …
阅读更多...
CodeWar题目

CodeWar题目

打算把不同网站上面的题目分开整理&#xff0c;免得麻烦。Code War上面我还是刷了一堆6级及以下的题目的&#xff0c;不过价值不大&#xff0c;这种不太能够训练实际解决问题的能力&#xff0c;所以我已经很久没上过了&#xff0c;有时间了可能会重新上去刷题吧&#xff0c;到时…
阅读更多...
Codewar 笔记

Codewar 笔记

1. Weight for weight 题目&#xff1a; For example 99 will have “weight” 18, 100 will have “weight” 1 so in the list 100 will come before 99. Given a string with the weights of FFC members in normal order can you give this string ordered by “weights”…
阅读更多...
codewar刷题，苦海造舟之始

codewar刷题，苦海造舟之始

今天又是被惨虐的一天&#xff0c;尽管今天是我这篇处女座发布的日子。   事情是这样的&#xff0c;身为一个刚迈步进入编程领域的小白&#xff0c;在无忧无虑&#xff0c;轻松惬意的心情下刷完了一套python课后&#xff0c;偶然间&#xff0c;很突然地了解到codewars这么个玩…
阅读更多...
Codewar一些积累No.2 从矩阵的加法体会vector的用法

Codewar一些积累No.2 从矩阵的加法体会vector的用法

用代码实现矩阵加法问题 最近在Codewar上看到一个有趣的问题是关于矩阵的加法问题. 题目中, 我所要编写的函数的传入参数是两个向量, 而且此向量是嵌套的, 具体内容如下: std::vector<std::vector<int> > matrixAddition(std::vector<std::vector<int> …
阅读更多...
Java到底好不好学

Java到底好不好学

Java到底好不好学 答案是&#xff1a;不难学。很多人都以为编程是个很高深的东西&#xff0c;其实不然&#xff0c;真正学习了你会发现编程比你高中学的数理化要简单的多。说它不难呢&#xff0c;如果学深入了&#xff0c;还算有很多东西要学习&#xff0c;比如你学Java&#…
阅读更多...
推荐文章

Copyright @ 2022~2023