新页面的CSS Reset

CSS Code

01 /* UI Object */
02 /* Common */
03 body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
04 body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
05 img,fieldset{border:0}
06 ul,ol{list-style:none}
07 em,address{font-style:normal}
08 a{text-decoration:none}
09 a:hover,a:active,a:focus{text-decoration:underline}
10  
11 .ld_section{position:absolute;top:17px;left:17px;z-index:1000;width:33px;height:34px;margin:-17px 0 0-16px;background:url(http://static.naver.com/desk/ld_sq2.png) no-repeat 00;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.naver.com/desk/ld_sq2.png',sizingMethod='crop')}
12 .ld_section img{margin:8px}
13 /* //UI Object */

HTML Code

1 <!-- UI Object -->
2 <div class="ld_section">
3     <img src="http://static.naver.com/desk/ico_ld_cen.gif" width="17" height="17" alt="로딩중">
4 </div>
5 <!-- //UI Object -->
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的小米页面HTML和CSS代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <title>小米官网</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">小米手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">家电</a></li> <li><a href="#">智能硬件</a></li> </ul> </nav> </header> <section id="banner"> <h1>小米10 Pro</h1> <p>全球首款LPDDR5内存</p> <a href="#" class="button">了解更多</a> </section> <section id="products"> <h2>小米产品</h2> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd9c9f9d2acfe3d3ce9d4eb9b4e0e060.jpg?thumb=1&w=400&h=400"> <h3>小米电视</h3> <p>从 32 至 75 英寸,满足各种需求</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3e9f5b09e7cbdc500c1d4bfa5ac1a0f5.jpg?thumb=1&w=400&h=400"> <h3>小米电脑</h3> <p>轻薄便携,助力高效办公和生活</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ac9d9c9e6f8f4d71d6d2fd4a464150a.jpg?thumb=1&w=400&h=400"> <h3>小米手机</h3> <p>强大性能搭载最新技术</p> <a href="#">了解更多</a> </div> <div class="product"> <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1b779f3c9a2b84fb1de4709b2f9d57a8.jpg?thumb=1&w=400&h=400"> <h3>小米家电</h3> <p>智能可控,让生活更美好</p> <a href="#">了解更多</a> </div> </section> <footer> <p>© 2021 小米</p> </footer> </body> </html> ``` CSS代码: ``` /* Reset CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Global Styles */ body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } a { text-decoration: none; color: #333; } ul { list-style: none; } /* Header Styles */ header { background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } nav { max-width: 1200px; margin: 0 auto; padding: 20px 0; } nav ul { display: flex; justify-content: space-between; align-items: center; } nav li { margin-right: 20px; } nav a { padding: 5px 10px; border-radius: 5px; transition: all 0.3s ease; } nav a:hover { background-color: #f5f5f5; } /* Banner Styles */ #banner { background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2cfdf03d7ae8b8c4b9eef46d3a53c54d.jpg?thumb=1&w=1920&h=408&f=webp&q=90); background-position: center; background-size: cover; height: 600px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; } #banner h1 { font-size: 60px; margin-bottom: 20px; } #banner p { font-size: 24px; margin-bottom: 30px; } .button { padding: 10px 30px; background-color: #ff6700; color: #fff; border-radius: 5px; transition: all 0.3s ease; } .button:hover { background-color: #ff5500; cursor: pointer; } /* Products Styles */ #products { max-width: 1200px; margin: 100px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 50px; } .product img { width: 100%; height: auto; } .product h3 { font-size: 24px; margin: 20px 0; } .product p { font-size: 16px; margin-bottom: 20px; } .product a { padding: 10px 20px; background-color: #f5f5f5; color: #333; border-radius: 5px; transition: all 0.3s ease; } .product a:hover { background-color: #ddd; cursor: pointer; } /* Footer Styles */ footer { background-color: #f5f5f5; padding: 20px; text-align: center; } ``` 你可以将上述代码复制到一个HTML和CSS文件中,然后在浏览器中打开HTML文件,就可以看到一个简单的小米官网页面了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值