当前位置：首页>前端>正文

HTML5期末考核大作业使用HTML+CSS技术制作学生动漫网页源码

前端2024-10-18 11:29:45

涓€銆侌煋氫綔鍝佷粙缁?/h2>
HTML瀹炰緥缃戦〉浠ｇ爜, 鏈疄渚嬮€傚悎浜庡垵瀛TML鐨勫悓瀛︺€傝瀹炰緥閲岄潰鏈夎缃簡css鐨勬牱寮忚缃紝鏈塪iv鐨勬牱寮忔牸灞€锛岃繖涓疄渚嬫瘮杈冨叏闈紝鏈夊姪浜庡悓瀛︾殑瀛︿範,鏈枃灏嗕粙缁嶅浣曢€氳繃浠庡ご寮€濮嬭璁′釜浜虹綉绔欏苟灏嗗叾杞崲涓轰唬鐮佺殑杩囩▼鏉ュ疄璺佃璁°€?/p>

浜屻€侌煍椾綔鍝佹晥鏋?/h2>

鈻讹笍瑙嗛婕旂ず

https://live.csdn.net/v/embed/239819

(title-B18JP 娴疯醇鐜?椤典唬鐮佽川閲忓ソ(娴疯醇鐜嬪姩婕富棰?~ 瀛︾敓缃戦〉璁捐浣滀笟婧愮爜(HTML+CSS))]

馃З 鎴浘婕旂ず

06.png

05.png

04.png

03.png

02.png

01.png

涓夈€侌煉?浣滃搧浠ｇ爜

馃ПHTML浠ｇ爜



<!DOCTYPE html>

<head>
    <meta charset="utf-8" />
    <title>娴疯醇鐜?lt;/title>
    <link href="css/style.css" rel="stylesheet" />
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <a href="#"><img src="images/logo.png" class="logo"/></a>
        </div>
        <div id="menu">
            <ul>
                <li><a href="index.html">娴疯醇鐜?lt;/a></li>
                <li><a href="jieshao.html">鏁呬簨浠嬬粛</a></li>
                <li><a href="renwu.html">涓昏浜虹墿</a></li>
                <li><a href="meitu.html">娴疯醇缇庡浘</a></li>
                <li><a href="zhuce.html">娉ㄥ唽鐢ㄦ埛</a></li>
                <li><a href="liuyan.html">闅忕瑪鐣欒█</a></li>
            </ul>
        </div>
        <div id="main">
            <div class="content">
                <ul class="list">
                    <li>
                        <img src="images/zy1.jpg" />
                        <h5>鈥滆崏甯解€濊挋濂嚶稤路璺</h5>
                        <p>鍒濇鐧诲満锛氭极鐢荤1璇?骞撮緞锛?7宀佲啋19宀?鐢熸棩锛?鏈?鏃?琛€鍨嬶細F鍨?韬珮锛?72cm鈫?74cm 韬唤锛氳崏甯芥捣璐煎洟鑸归暱 鏁呬埂锛氫笢娴仿烽杞︽潙 ...</p>
                        <a href="#">璇︽儏...</a>
                    </li>
                    <li>
                        <img src="images/zy2.jpg" />
                        <h5>鈥滃皬璐肩尗鈥濆缇?lt;/h5>
                        <p>鍒濇鐧诲満锛氭极鐢荤8璇?骞撮緞锛?8宀佲啋20宀?鐢熸棩锛?鏈?鏃?琛€鍨嬶細X鍨?韬唤锛氶樋榫欐捣璐煎洟娴嬮噺鍛樷啋鑽夊附娴疯醇鍥㈣埅娴峰＋ 鏁呬埂锛氫笢娴封柂鍙彲浜氳タ鏉?..</p>
                        <a href="#">璇︽儏...</a>
                    </li>
                    <li>
                        <img src="images/zy3.jpg" />
                        <h5>鈥滄捣璐肩寧浜衡€濈綏缃楄浜毬风储闅?lt;/h5>
                        <p>鍒濇鐧诲満锛氭极鐢荤3璇?骞撮緞锛?9宀佲啋21宀?鐢熸棩锛?1鏈?1鏃?琛€鍨嬶細XF鍨?韬唤锛氫笢娴锋捣璐艰祻閲戠寧浜衡啋鑽夊附娴疯醇鍥㈡垬鏂楀憳 鏁呬埂锛氫笢娴仿烽湝鏈堟潙...</p>
                        <a href="#">璇︽儏...</a>
                    </li>
                    <li>
                        <img src="images/zy4.jpg" />
                        <h5>鈥淕OD鈥濃柂涔岀储鏅?lt;/h5>
                        <p>鍒濇鐧诲満锛氭极鐢荤23璇?骞撮緞锛?7宀佲啋19宀?鐢熸棩锛?鏈?鏃?琛€鍨嬶細S鍨?韬唤锛氫箤绱㈡櫘娴疯醇鍥㈣埞闀库啋鑽夊附娴疯醇鍥㈢嫏鍑绘墜 鏁呬埂锛氫笢娴封柂瑗跨綏鏅潙...</p>
                        <a href="#">璇︽儏...</a>
                    </li>
                </ul>
            </div>
            <div class="sidebar">
                <div class="denglu">
                    <h2>鐢ㄦ埛鐧诲綍</h2>
                    <p><span>璐﹀彿锛?lt;/span><input type="text" /></p>
                    <p><span>瀵嗙爜锛?lt;/span><input type="password" /></p>
                    <div class="btn">
                        <a href="#"><img src="images/denglu.png" /></a>
                        <a href="#"><img src="images/zhuce.png" /></a>
                    </div>
                </div>
                <div class="chengyuan">
                    <h2>鑽夊附娴疯醇鍥㈡垚鍛?lt;/h2>
                    <ul>
                        <li><a href="#">鈥滆崏甯解€濊挋濂嚶稤路璺</a></li>
                        <li><a href="#">鈥滄捣璐肩寧浜衡€濈綏缃楄浜毬风储闅?lt;/a></li>
                        <li><a href="#">鈥滃皬璐肩尗鈥濆缇?lt;/a></li>
                        <li><a href="#">鈥淕OD鈥濃柂涔岀储鏅?lt;/a></li>
                        <li><a href="#">鈥滈粦瓒斥€濆北娌?lt;/a></li>
                        <li><a href="#">鈥滅埍鍚冩鑺辩硸鐨勯┋楣库€濇墭灏兼墭灏悸蜂箶宸?lt;/a></li>
                        <li><a href="#">鈥滄伓榄斾箣瀛愨€濆Ξ鍙风綏瀹?lt;/a></li>
                        <li><a href="#">鈥滄敼閫犱汉鈥濆紬鍏板</a></li>
                        <li><a href="#">鈥滅伒榄備箣鐜嬧€濆竷椴佸厠 </a></li>
                    </ul>
                    <img src="images/chengyuan.jpg" />
                </div>
            </div>
        </div>
        <div id="footer">
        
        </div>
    </div>
</body>

</html>

馃彔CSS浠ｇ爜



@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: #999999;
}

body {
    margin: 0px;
    padding: 0px;
    color: #666666;
    font-family: arial;
    font-size: 12px;
    background: #010206;
}

#wrapper {
    width: 1020px;
    margin: 0 auto;
    border: #333 1px solid;
    overflow: hidden;
}

/*澶撮儴*/

#header {
    width: 1020px;
    height: 410px;
    background-image: url(../images/banner.jpg);
    overflow: hidden;
}

#header .logo {
    display: block;
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
}

/*瀵艰埅*/

#menu {
    width: 100%;
    height: 53px;
    margin-bottom: 10px;
    background: url(../images/menu.jpg) no-repeat;
}

#menu ul li {
    display: block;
}

#menu ul li a {
    float: left;
    display: block;
    width: 170px;
    height: 53px;
    line-height: 53px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    background: url(../images/menu_bian.jpg) center left no-repeat;
}

#menu ul li a:hover {
    color: #00ccff;
}

/*涓棿*/

#main {
    width: 960px;
    padding: 30px;
    line-height: 2;
    overflow: hidden;
}

#main .content {
    float: left;
    width: 560px
}

.content .list {
    overflow: hidden;
}

.content .list li {
    height: 136px;
    overflow: hidden;
    margin-bottom: 30px;
}

.content .list li img {
    width: 200px;
    height: 130px;
    border: 3px solid #35373b;
    float: left;
    margin-right: 20px;
}

.content .list li h5 {
    font-size: 16px;
    color: #d82b82;
}

.content .jianjie li {
    line-height: 30px;
}

#main .sidebar {
    float: right;
    width: 320px;
}

.sidebar .denglu h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.sidebar .denglu p {
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
}

.sidebar .denglu p span {
    display: block;
    width: 60px;
    float: left;
}

.sidebar .denglu p input {
    display: block;
    width: 260px;
    height: 30px;
    border: none;
    float: left;
}

.sidebar .denglu .btn img {
    float: left;
    margin-left: 60px;
}

.sidebar .chengyuan {
    clear: both;
    padding-top: 30px;
}

.sidebar .chengyuan h2 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.sidebar .chengyuan li {
    line-height: 30px;
    border-bottom: 1px dashed #999;
}

.sidebar .chengyuan li a:hover {
    color: #00ccff;
}

.sidebar .chengyuan img {
    width: 100%;
    margin-top: 20px;
}

/*鏁呬簨浠嬬粛*/

.jieshao h2 {
    margin-bottom: 10px;
}

.jieshao p {
    text-indent: 32px;
}

.jieshao img {
    width: 100%;
}

/*涓昏浜虹墿*/

.renwu h2 {
    text-align: center;
}

.renwu li {
    width: 220px;
    float: left;
    margin: 10px;
    text-align: center;
}

.renwu li img {
    width: 220px;
    height: 220px;
}

.renwu {
    width: 100%;
}

.renwu .page {
    clear: both;
    padding-top: 20px;
    text-align: center;
    font-size: 20px;
}

/*娴疯醇缇庡浘*/

.meitu h2 {
    text-align: center;
}

.meitu img {
    width: 100%;
    margin-top: 20px;
}

/*娉ㄥ唽*/

.zhuce h2 {
    text-align: center;
}

.zhuce .input-box {
    width: 500px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 20px;
}

.zhuce .input-box p {
    height: 26px;
    width: 100px;
    float: left;
    line-height: 26px;
}

.zhuce .input-box input {
    width: 400px;
    height: 26px;
    border: none;
    float: left;
}

.zhuce .btn {
    display: block;
    width: 92px;
    height: 59px;
    background: url(../images/zhuce.png);
    border: none;
    margin: auto;
    outline: none;
    cursor: pointer;
}

/*鐣欒█*/

.liuyan h2 {
    text-align: center;
}

.liuyan .input-box {
    width: 500px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 20px;
}

.liuyan .input-box p {
    height: 26px;
    width: 100px;
    float: left;
    line-height: 26px;
}

.liuyan .input-box input {
    width: 400px;
    height: 26px;
    border: none;
    float: left;
}

.liuyan .input-box textarea {
    display: block;
    width: 400px;
    height: 100px;
    border: none;
    float: left;
}

.liuyan .btn {
    display: block;
    width: 92px;
    height: 59px;
    background: url(../images/tijiao.png);
    border: none;
    margin: auto;
    outline: none;
    cursor: pointer;
}

#footer {
    clear: both;
    width: 960px;
    padding: 30px 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background: url(../images/footer.jpg) bottom center no-repeat;
}

鍥涖€侌煄佹洿澶氭簮鐮?/h2>
銆愬共璐у垎浜€戣嚜瀛︾紪绋嬬殑灏忎紮浼村彲浠ュ墠寰€鎴戠殑 gitee 浠撳簱锛堟寔缁洿鏂颁腑...锛?/p>
馃摃銆恮eb瀛︿範鎸囧崡銆戜粠web鍩虹銆佽绠楁満鍩虹鍒板墠绔父鐢ㄦ鏋剁殑鏁欑▼锛屾兜鐩栧墠绔ぇ閮ㄥ垎蹇呭鐭ヨ瘑锛堝涔犳寚鍗?+ 鎶€鏈枃绔?+ 璧勬簮鍒嗕韩锛?/p>
Gitee浠撳簱鍦板潃锛堟潵涓猄tar鍚锛夛細 https://gitee.com/zhanyuqiu2022/my-app

查看全文

https://www.xamrdz.com/web/23j1994531.html

浜屻€侌煍椾綔鍝佹晥鏋?/h2>

鈻讹笍瑙嗛婕旂ず

馃З 鎴浘婕旂ず

涓夈€侌煉?浣滃搧浠ｇ爜

馃ПHTML浠ｇ爜

馃彔CSS浠ｇ爜

相关文章：