html 都是截取部分的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 搜索引擎爬蟲 一般不超過28個字 -->
<title>京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！</title>
<!-- 網站說明 一般不超過120個字 -->
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
<!-- 關鍵字 一般是6~8個關鍵詞 電商網頁除外 -->
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存盤卡,京東" />
<link rel="shortcut icon" href="https://bbs.csdn.net/topics/favicon.ico" type="image/x-icon"/>
<!-- 引入css初始化檔案 -->
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/normalize.css">
<!-- 頭部跟底部樣式基本一致 我們做最基本的公共樣式-->
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/base.css">
<!-- 我們做專屬的首頁樣式 -->
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/index.css">
</head>
<body>
<div class="grid-col3 fr">
<!-- 登入模塊 -->
<div class="login">
<div class="login-t">
Hi，歡迎來到京東！ <br />
<a href="https://bbs.csdn.net/topics/#">登入</a>
<a href="https://bbs.csdn.net/topics/#">注冊</a>
<a href="https://bbs.csdn.net/topics/#" class="user-info">
<img src="https://img.uj5u.com/2020/09/19/106649192338091.jpg">
</a>
</div>
<div class="login-b">
<a href="https://bbs.csdn.net/topics/#">新人福利</a>
<a href="https://bbs.csdn.net/topics/#">PLUS會員</a>
</div>
</div>
<!-- 新聞模塊 -->
<div class="news"></div>
<!-- 服務拓展模塊 -->
<div class="expand"></div>
</div>
</div>
<body>
css是
.grid-col3 {
width: 190px;
height: 480px;
}
.login {
height: 85px;
border:1px soild #ccc;
background-color: #fff;
padding:15px;
}
.login-t {
width: 95px;
height: 60px;
line-height: 20px;
font-size: 12px;
white-space: nowrap;/*強制一行內顯示*/
overflow: hidden;/*溢位部分隱藏*/
text-overflow: ellipsis;/*超出部分顯示省略號*/
color: #666;
padding-left:60px;/*給padding是想把文字擠過來*/
position: relative;
}
.login-t a {
color: #666;
}
.login-t a:hover {
color: #f10512;
}
.user-info {
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
background: url(../images/[email protected]) no-repeat -70px 0;
}
.login-b a {
display: inline-block;
width: 70px;
height: 20px;
border:2px soild #f10512;
}
.user-info img {
width: 40px;
border-radius: 50%;
margin: 5px;
}
.news {
height: 155px;
border-bottom:1px soild #f10512;
background-color: skyblue;
}
.expand {
height: 209px;
background-color: pink;
}
uj5u.com熱心網友回復：
html最后面的body復制錯了 是</body>
</html>
uj5u.com熱心網友回復：
你自己對比下soild
solid
uj5u.com熱心網友回復：
好的 知道問題在哪了 以后會注意的謝謝轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/84304.html
標籤：HTML(CSS)
上一篇：手機上如何實作下載地址的隱藏