碼上快樂

相關內容    簡體    繁體

html （第四本書第六章盒子模型參考）

本文轉載自   查看原文   2018-07-26 11:02   3009    隨筆

上機1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鳥課程導航</title>
    <style>
        body, ul, li, h1 {
            padding: 0px;
            margin: 0px;
        }
        li {
            list-style: none;
        }
        div {
            width: 220px;
            border: 1px #aacbee solid;
            padding: 0px 0px 10px 0px;
            background-color: #f5f9fc;
            margin: 0px auto;
        }
        h1 {
            background: url(image/title_icon.gif) 5px 8px no-repeat;
            padding-left: 25px;
            color: #1f376d;
            font-size: 14px;
            line-height: 30px;
            height: 30px;
        }
        ul {
            padding: 0px 5px;
        }
        li {
            height: 30px;
            background: url(image/submenu.gif) right center no-repeat;
            line-height: 30px;
            padding-left: 5px;
            border-top: 1px #cfe2f5 solid;
        }
        a {
            text-decoration: none;
            color: #000000;
        }
        a:hover {
            text-decoration: none;
            color: #FF6215;
        }
    </style>
</head>
<body>
<div>
    <h1>課程導航</h1>
    <ul>
        <li><a href="#">ACCP 軟件工程師</a></li>
        <li><a href="#">BTEST 軟件測試工程師</a></li>
        <li><a href="#">BENET 網絡工程師</a></li>
        <li><a href="#">JBNS 網站工程師</a></li>
        <li><a href="#">ACCP 啟蒙星</a></li>
        <li><a href="#">ANDROID 軟件工程師</a></li>
        <li><a href="#">JAVA 軟件工程師</a></li>
        <li><a href="#">.NET 軟件工程師</a></li>
        <li><a href="#">網絡營銷</a></li>
    </ul>
</div>
</body>
</html>

 

上機2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分類</title>
    <style>
        h1, dl, dt, dd {
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: #D5D5D5;
        }
        div {
            width: 230px;
            background-color: #fff;
        }
        h1 {
            font-size: 16px;
            font-weight: bold;
            color: #FFF;
            background-color: #000;
            text-indent: 1em;
            line-height: 35px;
        }
        dt {
            padding-left: 27px;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
            font-weight: bold;
        }
        dd {
            font-size: 12px;
            color: #666666;
            line-height: 20px;
            border-bottom: 1px #666666 dashed;
            padding-left: 27px;
        }
        dt:nth-of-type(1) {
            background: url(image/icon_01.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(2) {
            background: url(image/icon_02.gif) 0px 2px no-repeat;
        }
        dt:nth-of-type(3) {
            background: url(image/icon_03.gif) 0px 4px no-repeat;
        }
        dt:nth-of-type(4) {
            background: url(image/icon_04.gif) 0px 2px no-repeat;
        }
        dt:nth-of-type(5) {
            background: url(image/icon_05.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(6) {
            background: url(image/icon_06.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(7) {
            background: url(image/icon_07.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(8) {
            background: url(image/icon_08.gif) 0px 0px no-repeat;
        }
        dt:nth-of-type(9) {
            background: url(image/icon_09.gif) 0px 0px no-repeat;
        }
        dd:last-of-type {
            border-bottom: 0px;
        }
    </style>
</head>
<body>
<div>
    <h1>全部分類</h1>
    <dl>
        <dt>護膚</dt>
        <dd>
            潔面 化妝水 噴霧 美容液 眼霜<br/>
            眼部精華 眼膜 面膜 面膜貼<br/>
            水洗面膜 免洗面膜 精華 精油<br/>
            凝露 乳液 面霜 日霜 晚霜
        </dd>
        <dt>彩妝</dt>
        <dd>
            卸妝 防曬 隔離 BB霜 粉底 粉餅<br/>
            睫毛膏 眼影 唇彩 腮紅 眼線筆<br/>
            底妝 遮瑕 蜜粉 眉筆 美甲
        </dd>
        <dt>香氛</dt>
        <dd>男香 女香 小Q裝 中性香水</dd>
        <dt>身體護理</dt>
        <dd>
            洗發 護發 沐浴 身體乳 手足護理<br/>
            護手霜 纖體 身體精油 頸部護理<br/>
            個人護理 衛生用品 脫毛
        </dd>
        <dt>禮盒套裝</dt>
        <dd>
            護膚套裝 身體護理套裝 彩妝套裝 <br/>
            旅行裝 香水套裝 男士套裝
        </dd>
        <dt>美容工具</dt>
        <dd>
            護膚 彩妝 美發 美體 美甲 <br/>
            美容儀器 其他美容工具
        </dd>
        <dt>母嬰專區</dt>
        <dd>奶粉 尿褲濕巾 母嬰洗護</dd>
        <dt>男士專區</dt>
        <dd>
            潔面 爽膚水 面霜 男香<br/>
            眼霜 凝膠 乳液 精華 沐浴
        </dd>
        <dt>食品保健</dt>
        <dd>瘦身類 保健類 美容類 食品類</dd>
    </dl>
</div>
</body>
</html>

 

上機3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京東快報</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            margin: 30px;
        }
        a {
            text-decoration: none;
        }
        div {
            border: 1px #e4e4e4 solid;
            width: 230px;
            box-sizing: border-box;
        }
        h2 {
            padding-left: 10px;
            line-height: 43px;
            height: 43px;
            border-bottom: 2px #E8E8E7 dotted;
            font-size: 16px;
            color: #666;
            font-weight: normal;
            background: linear-gradient(to bottom,#CCCCFF,#FFFFFF);
        }
        ul {
            list-style: none;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        li {
            line-height: 26px;
            padding-left: 10px;
            padding-right: 10px;
        }
        a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }
        a:hover {
            color: #b20000;
        }
        span {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>
    <h2>京東快報</h2>
    <ul>
        <li><a href=""><span>[特惠]</span>海飛絲去屑又去油 超清爽</a></li>
        <li><a href=""><span>[公告]</span>京東公益支持魯甸新動作</a></li>
        <li><a href=""><span>[特惠]</span>4688元搶iPhone 6</a></li>
        <li><a href=""><span>[公告]</span>小米電視攜豪禮高調入駐京東</a></li>
    </ul>
</div>
</body>
</html>

 

上機4

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>美容熱點產品</title>
    <style>
        p, ul, li {
            margin:0px;
            padding:0px;
        }
        ul, li {
            list-style-type:none;
        }
        body {
            background-color:#eee7e1;
            font-size:12px;
        }
        div {
            width:260px;
            background:#FFF;
        }
        p {
            font-size:14px;
            font-weight:bold;
            color:#FFF;
            background-color:#e9185a;
            height:35px;
            line-height:35px;
            padding-left:10px;
        }
        li {
            border-bottom:1px #a8a5a5 dashed;
            height:30px;
            line-height:30px;
            padding-left:2px;
        }
        a {
            color:#666666;
            text-decoration:none;
        }
        a:hover {
            color:#e9185a;
        }
        a span {
            color:#FFF;
            font-weight:bold;
            margin-right: 10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #373b3c;
            line-height: 20px;
            text-align: center;
        }
        a:hover span {
            background: #e9185a;
        }
    </style>
</head>
<body>
<div>
    <p>大家都喜歡買的美容品</p>
    <ul>
        <li><a href="#"><span>1</span>雅詩蘭黛即時修護眼部精華霜15ml</a></li>
        <li><a href="#"><span>2</span>伊麗莎白雅頓顯效復合活膚霜 75ml</a></li>
        <li><a href="#"><span>3</span>OLAY玉蘭油多效修護霜 50g</a></li>
        <li><a href="#"><span>4</span>巨型一號絲瓜水320ML</a></li>
        <li><a href="#"><span>5</span>倩碧保濕潔膚水2號 200ml</a></li>
        <li><a href="#"><span>6</span>比度克細膚淡印霜 30g</a></li>
        <li><a href="#"><span>7</span>蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml</a></li>
        <li><a href="#"><span>8</span>SK-II護膚精華露 215ml</a></li>
        <li><a href="#"><span>9</span>歐萊雅青春密碼活顏精華肌底液</a></li>
    </ul>
</div>
</body>
</html>

 

上機5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>愛奇異視頻播放列表</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 1000px;
            margin: 40px auto;
        }
        h3{
            font-size: 18px;
            line-height: 40px;
        }
        li{
            display: inline-block;
            padding: 10px;
            margin-right: 5px;
        }
        li:hover{
            border-radius: 10px;
            box-shadow: 0 5px 5px rgba(0,0,0,0.1),0 0 10px 0 rgba(0,0,0,0.2);
        }
        h4:nth-of-type(1){
            font-size: 16px;
            color: #4d4d4d;
            line-height: 30px;
        }
        p:nth-of-type(1){
            color: #640000;
            font-size: 14px;
        }
        p:nth-of-type(2){
            font-size: 12px;
            color: blue;
        }
    </style>
</head>
<body>
<div>
    <h3>熱播</h3>
    <ul>
        <li>
            <img src="image/img1.png" alt=""/>
            <h4>神武趙子龍</h4>
            <p>怒，林更新不抱網紅抱女神</p>
            <p>點擊次數：242445次</p>
        </li>
        <li>
            <img src="image/img2.png" alt=""/>
            <h4>旋風十一人</h4>
            <p>胡歌變教練在撩前女友</p>
            <p>點擊次數：242445次</p>
        </li>
        <li>
            <img src="image/img3.png" alt=""/>
            <h4>太陽的后裔</h4>
            <p>宋慧喬吃嫩草</p>
            <p>點擊次數：242445次</p>
        </li>
        <li>
            <img src="image/img4.png" alt=""/>
            <h4>山海經之赤影傳說</h4>
            <p>娜扎張翰再度聯手</p>
            <p>點擊次數：242445次</p>
        </li>
    </ul>
</div>
</body>
</html>

課后3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中心開班信息</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        div{
            width:250px;
            border:1px rgb(202, 202, 220) solid;
            border-radius: 8px;
            margin: 0 auto;
            background: linear-gradient(to bottom, rgb(47, 206, 251),white,white,white);
            box-sizing: border-box;
        }
        h1{
            background: url("image/bg.gif") 8px 7px no-repeat;
            font-size: 14px;
            font-weight: bold;
            color:white;
            line-height:35px;
            height:35px;
            padding-left:45px;
            padding-top:3px;
            padding-bottom:3px;
            margin:0;
            border-bottom:1px white solid ;
        }
        ul{
            padding-left:0;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        li{
            background: url("image/dotBg.gif") left center no-repeat;
            line-height: 30px;
            height:30px;
            font-size: 17px;
            padding:0 0 0 18px;
            list-style: none;
            margin-right: 18px;
        }
        a{
            color: rgb(93, 93, 101);
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
            color:orangered;
        }
    </style>
</head>
<body>
<div>
    <h1>中心開班信息</h1>
    <ul>
        <li><a href="">8月12日：學歷+技能班</a></li>
        <li><a href="">8月16日：高考特招班</a></li>
        <li><a href="">8月23日：Java精英班</a></li>
        <li><a href="">8月31日：學士后強化班</a></li>
        <li><a href="">9月5日：大學生就業班</a></li>
        <li><a href="">9月9日：企業定向委培班</a></li>
        <li><a href="">9月16日：網絡營銷強化班</a></li>
    </ul>
</div>
</body>
</html>

 

課后4

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品分類列表頁</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        div{
            padding: 0 2px 2px;
            margin:12px;
            width:210px;
            border:2px orange solid;
            border-radius: 10px;
            box-sizing: border-box;
        }
        p:first-child{
            background: url("image/icon_01.jpg") 3px  no-repeat;
        }
        p:nth-of-type(2){
            background: url("image/icon_02.jpg") 3px  no-repeat;
        }
        p:nth-of-type(3) {
            background: url("image/icon_03.jpg") 3px  no-repeat;
        }
        p:nth-of-type(4){
            background: url("image/icon_04.jpg") 3px  no-repeat;
        }
        p:nth-of-type(5){
            background: url("image/icon_05.jpg") 3px  no-repeat;
        }
        p:nth-of-type(6){
            background: url("image/icon_06.jpg") 3px  no-repeat;
        }
        p:nth-of-type(7){
            background: url("image/icon_07.jpg") 3px  no-repeat;
        }
        p:nth-of-type(8){
            background: url("image/icon_08.jpg") 3px  no-repeat;
        }
        p:nth-of-type(9){
            background: url("image/icon_09.jpg") 3px  no-repeat;
        }
        p:last-child{
            background: url("image/icon_10.jpg") 3px 2px no-repeat;
        }
        p{
            line-height:30px;
            height:30px;
            font:bold 14px "黑體";
            padding-left:52px;
            padding-top:18px;
            margin:0;
            border-bottom:1px gray dotted;
        }
        a{  color:black;
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
            color:red;
        }
        p:last-of-type {
            border-bottom: 0;
        }
    </style>
</head>
<body>
<div>
    <p><a href="">酒水、飲料</a></p>
    <p><a href="">進口食品</a></p>
    <p><a href="">休閑零食</a></p>
    <p><a href="">地方特產</a></p>
    <p><a href="">保健、沖調</a></p>
    <p><a href="">糧油、生鮮</a></p>
    <p><a href="">美容洗護</a></p>
    <p><a href="">清潔洗滌</a></p>
    <p><a href="">母嬰、紙品</a></p>
    <p><a href="">家居百貨</a></p>
</div>
</body>
</html>

 

課后5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>免費登錄登錄頁面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 312px;
            background: url("image/bg.jpg") no-repeat;
        }
        ul{
            margin-top: 80px;
            padding-left: 25px;
            padding-right: 25px;
            list-style: none;
        }
        li{
            color: white;
            font-size: 14px;
            line-height: 37px;
        }
        span{
            color: red;
        }
        input[type=text],input[type=email],select{
            border: solid 1px grey;
            border-radius: 4px;
            height: 20px;
        }
        li:last-child{
            text-align: center;
        }
    </style>
</head>
<body>
<form method="post">
    <ul>
        <li><span>*</span> 姓名： <input type="text" name="name" size="23"/></li>
        <li><span>*</span> 郵箱： <input type="email" name="email" size="23"/></li>
        <li><span>*</span> 電話： <input type="text" name="num" size="23"/></li>
        <li>
            性別：<select name="gen">
            <option>請選擇</option>
            <option>男</option>
            <option>女</option>
        </select>
        </li>
        <li>
            年齡：<select name="age">
            <option>請選擇</option>
            <option>30</option>
            <option>31</option>
        </select>
        </li>
        <li><input type="image" src="image/btn.jpg"/></li>
    </ul>
</form>
</body>
</html>

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html （第四本書第四章參考） 第一本書 第六章（課后題） html （第四本書第九章參考） html （第四本書第五章參考） html （第四本書第七章浮動參考） html （第四本書第八章參考） 第六章 第六章 字典 第六章-邏輯回歸與最大熵模型 深度學習框架PyTorch一書的學習-第六章-實戰指南
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM