网页设计作业 - 6-1|2

2023-10-30T21:50:00

声明：

仅供参考，看不懂就多看看书

实在不行直接交index去我都搞好外链了
直接html完全可以显示出效果 ::(你懂的)

6-1 效果：

6-1 HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>习题6-1</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="http://css.134920.xyz/2251100259/20231029/6-1/style.css">
        <!-- 外部css http://css.134920.xyz/2251100259/20231029/6-1/6-1.css -->
    </head>
    <body>
        <!-- 顶部 -->
        <div id="css_134920_xyz">
            <h1>创业乐园</h1>
        </div>

        <div id="css_134920_xyz_2251100259_20231029_6-1_6-1_css">
            <!-- 左边 -->
            <div id="www_fanwo_top_archives_280_html">
                <div class="post">

                    <div id="css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgtop">
                        <div class="post-bgtop">

                            <div class="title">

                                <a href="">想成为优秀设计师的“思想”</a>
                                <div class="xuxian"></div>
                            </div>
                        </div>
                    </div>
                    <div id="css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgbtm">
                        <div class="post-bgbtm">

                            <div class="entry">
                                <p>设计师-----不管从事什么专业的设计，工作环境、生活环境和设计师本人的内心世界一定需要
                                    舒<br>畅、放松、自然、真实。</p>
                                <p>生活中好多人有机会去阅读时尚信息，大多是走马观花。没有自己的思维-----是眼在看，心没有
                                    <br>思考，这样的翻阅是休闲娱乐，不是学习的过程。
                                </p>
                                <p>成为优秀的设计师，是拥有不断进取的创新精神的，不会循规蹈矩，思维灵敏，生活和工作轻松自
                                    <br>如，没有官僚般的狡诈与压抑，敢于承认别人的事业，大家的工作都是一样的，没有阶级，是很自然
                                    <br>的，就是自己喜欢的一份工作，真实的我。要成为优秀的设计师要从自身做起，要独立思考，热爱设
                                    <br>计，对生活中的事物敏感，才能创造出属于自己风格的作品。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- post结束 -->
            <!-- 右边 -->
            <div id="sidebar">
                <ul>
                    <p>
                    <h2>作品展示</h2>
                    </p>
                    <div class="url">
                        <li>
                            <ul>
                                <li>
                                    <a href="">Web设计</a>
                                </li>
                                <li>
                                    <a href="">平面设计</a>
                                </li>
                                <li>
                                    <a href="">VI设计</a>
                                </li>
                                <li><a href="">Logo设计</a>
                                </li>
                                <li><a href="">海报设计</a></li>
                                <li><a href="">印刷品设计</a></li>
                                <li><a href="">GUI设计</a></li>
                            </ul>
                        </li>

                    </div>
                </ul>
            </div>
        </div>


        <!-- 底部版权信息 -->
        <footer id="css2251100259">
            <p>Copyright (c) 2021 创业中心 All rights reserved</p>

        </footer>
        <!-- 底部版权信息结束 -->
    </body>
</html>
<!--有点耐心抄嘛. -->

6-1 CSS代码：

/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
body {
    margin: 20px 0px 0px 0px;
    padding: 0;
    background: #191919 url(www_fanwo_top/img07.jpg) no-repeat right top;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #3C3C3C;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #549900;
}

h1 {
    font-size: 44px;
}

h2 {
    font-size: 18px;
}

/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
p,
ul,
ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
}

ul,
ol {}

blockquote {}

a {
    color: #065EFE;
}

a:hover {
    text-decoration: none;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 7px 30px 0 0;
}

img.right {
    float: right;
    margin: 7px 0 0 30px;
}

hr {
    display: none;
}

.list1 {}

.list1 li {
    float: left;
    line-height: normal;
}

.list1 li img {
    margin: 0 30px 30px 0;
}

.list1 li.alt img {
    margin-right: 0;
}

#wrapper {}

/* 顶部单元属性 */

#css_134920_xyz {
    width: 950px;
    height: 135px;
    margin: 0 auto;
    background: url(www_fanwo_top/img03.jpg) no-repeat left top;
}

#css_134920_xyz h1,
#css_134920_xyz p {
    margin: 0px;
    line-height: normal;
    font-weight: normal;
    color: #FFFFFF;
}

#css_134920_xyz h1 {
    padding: 30px 0px 0px 120px;
    letter-spacing: -1px;
    font-size: 48px;
}

/* 中间大页面属性 */

#css_134920_xyz_2251100259_20231029_6-1_6-1_css {
    width: 930px;
    height: 340px;
    margin: 0px auto;
    padding: 10px 10px 10px 10px;
    background: #E1E1E1;
}
/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
#css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgtop {
    width: 620px;
}

#css_134920_xyz_2251100259_20231029_6-1_6-1_css-bgbtm {
    width: 620px;
    overflow: hidden;
}



/* 左侧单元属性 */

#www_fanwo_top_archives_280_html {
    float: left;
    width: 620px;
    padding: 0px 0px 0px 0px;
}


.post {
    background: url(www_fanwo_top/img05.jpg) repeat-y left top;
}

.post-bgtop {
    background: url(www_fanwo_top/img04.jpg) no-repeat left top;
}

.post-bgbtm {
    padding: 0px 30px 20px 30px;
    background: url(www_fanwo_top/img06.jpg) no-repeat left bottom;
}

.post .title {
    height: 44px;
    width: auto;
    margin: 0px;
    padding: 36px 0px 0px 28px;
}

.post .title .xuxian {
    background: url(www_fanwo_top/img11.jpg) repeat-x left bottom;
    width: auto;
    padding: 5px 0px 0px 10px;
    margin-right: 8ch;
}

.post .title a {
    letter-spacing: -2px;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 36px;

    color: #424242;
}

.post .title a:hover {
    color: #065EFE;
}

.post .meta {
    margin-left: 2px;
    padding: 4px 30px 2px 0px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #66665E;
}

.post .meta span {
    margin: 0px;
}

.post .meta a {
    text-decoration: none;
}

.post .entry {
    padding: 10px;
    font-size: 12px;
}

.post .entry p {
    text-indent: 2em;
    line-height: 1.5;
}

.post .comments {
    display: block;
    width: 120px;
    height: 18px;
    margin: 0px;
    padding: 3px 0px 0px 40px;
    background: #90BF35;
    border: 1px solid #5F817E;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

/* 右侧单元属性 */
.www.fanl.cn{
margin: 50px;
float: left;
padding: 0;
color: #191919;
inline-size: 50px;
width: 30px;
height: 3.75rem;
}
#sidebar {
    float: right;
    width: 310px;
    font-family: Arial, Helvetica, sans-serif;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    background: none;
    list-style: none;
    line-height: normal;
}

#sidebar li {
    background: url(www_fanwo_top/img09.jpg) repeat-y left top;
}

#sidebar li ul {
    margin: 0px 0px;
    padding: 0px 0px 20px 0px;
    background: url(www_fanwo_top/img10.jpg) no-repeat left bottom;
}

#sidebar li li {
    margin: -20px 30px 20px 30px;
    padding: 8px 0px 8px 10px;
    border-bottom: 1px solid #E0E0E0;
    background: url(www_fanwo_top/img12.jpg) no-repeat left 13px;
}

#sidebar li li a {
    font-weight: normal;
}
/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
#sidebar li li a:hover {
    color: #065EFE;
}

#sidebar p {
    margin: 0;
    padding: 0px 14px;
}

#sidebar h2 {
    height: 50px;
    margin: 0px;
    padding: 30px 0px 13px 30px;
    background: url(www_fanwo_top/img08.jpg) no-repeat left top;
    letter-spacing: -1px;
    text-transform: lowercase;
    font-size: 24px;
    font-weight: normal;
    color: #424242;
}

#sidebar p {
    line-height: 200%;
}

#sidebar a {
    text-align: left;
    text-decoration: none;
    font-weight: bold;
    color: #666666;
}

.url {
    width: 310px;
    margin-top: 0%;
}

/* 底部版权属性 */

#css2251100259 {
    width: 920px;
    height: 100px;
    margin: 0 auto;
    padding: 0;
}

#css2251100259 p {
    margin: 0;
    color: #FFF;
    padding: 30px 0px 0px 0px;
    text-align: center;
    line-height: normal;
    font-size: 11px;
}

6-2 运行效果：

6-2 HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>习题6-2</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="http://css.134920.xyz/2251100259/20231029/6-2/style.css">
        <!-- 外部样式：http://css.134920.xyz/2251100259/20231029/6-2/style.css -->
        <!-- 有网的话理论上index即可实现 -->
    </head>
    <body>
        <!-- 顶部 -->
        <!-- container -->
        <div id="templatemo_container">
            <div id="templatemo_header">
                <!-- crossing -->
                <div id="templatemo_logo">
                    徒手攀岩，低空跳伞，高空飞跃 </div>
                <!-- menu -->
                <div id="templatemo_menu">

                    <a href="">
                        <div class="templatemo_menu_home">首页</div>
                    </a>
                    <div class="templatemo_v_line"></div>
                    <a href="">
                        <div class="templatemo_menu_content">联系</div>
                    </a>
                    <div class="templatemo_v_line"></div>
                    <a href="">
                        <div class="templatemo_menu_about">路线</div>
                    </a>
                    <div class="templatemo_v_line"></div>
                    <a href="">
                        <div class="templatemo_menu_member">关于</div>
                    </a>
                </div>
            </div>
            <div class="templatemo_one_col">
                <div class="templatemo_h_line">
                </div>
                <h1>徒手攀岩</h1><img src="http://css.134920.xyz/2251100259/20231029/6-2/www_fanwo_top/templatemo_img_1.jpg" alt="">

                <p>徒手攀岩（rockdiming with
                    hands）：利用岩石上的裂缝、洞穴、突起等天然把攀登陡峭岩壁的运动。攀岩是一项锻炼综合素质的运动，不仅可以获得惊人的勇气，过人的力量、几号的柔韧性，更可以提高耐力和判断力，使人在激烈竞争、纷繁紊乱的都市生活中应付自如。在岩壁上攀爬时，生活简单得只剩下自己。
                </p>
                <p>徒手攀岩就是不加辅助攀岩工具和保护措施的<a
                        href="">攀岩</a>运动，因而具有极大的危险性，名列世界十大危险运动之列。但是，徒手攀岩正以其特有的魅力，突出的个性感染着人们，参与攀岩，会让人在悬崖峭壁的抗衡中学会坚强，在与大山的拥抱中感受宽容，在征服攀登路线后享受成功与胜利的喜悦。
                </p>
                <p>在欧美、前苏联及亚洲的日本、韩国、攀岩运动已相当流行，当今世界攀岩水平数欧美热别是发过与美国最高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同属亚洲中流水平。<a
                        href="">ReadMore...</a></p>
            </div>
            <div class="templatemo_two_col">
                <div class="templatemo_h_line"></div>
                <img src="http://css.134920.xyz/2251100259/20231029/6-2/www_fanwo_top/templatemo_img_2.jpg" alt="">
                <h2>起源</h2>
                <p>攀岩运动起源于18世纪的欧洲，1970年成为一项独立的运动项目。徒手攀岩是指不依赖任何外在的辅助力量，只靠攀岩者的自生力量完成攀登过程。</p>
                <p>在欧美、前苏联及亚洲的日本、韩国、攀岩运动已相当流行，当今世界攀岩水平数欧美热别是发过与美国最高，法国相对在人工岩壁上占优，美国在自然岩壁称强。在亚洲，日本、韩国水平较高，他们有些选手已达到世界水平。中国大陆、香港及台湾的水平大体相当，同属亚洲中流水平。
                </p>
            </div>
        </div>
        <div class="templatemo_three_col">
            <img src="http://css.134920.xyz/2251100259/20231029/6-2/www_fanwo_top/templatemo_img_3.jpg" alt="">
            <h2>运动特点</h2>
            <p>
                徒手攀岩要求人们在各种高度及角度的岩壁上，连续完成转身、引体向上、腾挪甚至跳跃等惊险动作、集健身、娱乐、竞技于一身，是一项刺激而不失优美的极限运动，被全球的攀岩迷们称为“峭壁上的芭蕾”
            </p>
            <p>虽然，近年来攀岩已经渐渐成为了一种大众化的户外极限运动，越来越多的人从攀岩运动中体验到了独特的乐趣，但是徒手攀岩对人的体能、胆量、身体协调性和柔韧性的要求极高，对于那些没有经历过系统的专业训练的
                初学者来说无疑是危险重重。</p>
        </div>
        </div>
        <!-- 底部信息+img -->
        <div id="templatemo_css_fanwo_top">
            <div class="css_fanwo_top">
                Copyright &COPY; 2021 <a>宇宙极限网</a>&nbsp;|&nbsp;设计 &nbsp;<a>海阔天空工作室</a>
            </div>
            <div id="templatemo_bottom">
            </div>
        </div>
    </body>
</html>
<!--总得动点脑子吧？-->

6-2 CSS代码:

/*代码和人有个能跑就行啦~*/
/* 文章页：https://blog.fanl.cn/archives/280.html */
html {
    background: #323030;
}
/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
body {
    margin: 0;
    padding: 0;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1.5em;
    width: 100%;
    display: table;
    background: url(www_fanwo_top/templatemo_bg.jpg) top repeat-x #323030 ;
}

a:link,
a:visited {
    color: #CCFF00;
    text-decoration: underline;
}
.www_fanwo_top{
    max-width: 250px;
    margin: 250 250 250 250;
    min-width: 250px;
    height: 250px;
}
a:active,
a:hover {
    color: #FF9900;
    text-decoration: none;
}

p {
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    color: #EEEEEE;
    text-align: justify;
    margin: 0 0 15px 0;
}

h1 {
    margin: 0 0 15px 0;
    font-size: 24px;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    color: #00CCFF;
}

h2 {
    margin: 0 0 20px 25px;
    font-size: 24px;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    color: #00CCFF;
}

#templatemo_container {
    width: 900px;
    margin: auto;
}

#templatemo_header {
    width: 900px;
    height: 220px;
    margin: 0;
    padding: 1px 0 0 0;
}

#templatemo_logo {
    float: left;
    background: url(www_fanwo_top/templatemo_logo.jpg);
    width: 270px;
    height: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-style: italic;
    color: #CCCCCC;
    margin: 105px 0 0 0;
    padding: 58px 0 0 90px;
}

#templatemo_menu {
    float: right;
    width: 430px;
    height: 120px;
    background: url(www_fanwo_top/templatemo_menu_bg.jpg);
    padding: 0;
    margin: 80px 0 0 0;
}

#templatemo_menu .templatemo_menu_item {
    float: left;
    width: 100px;
    height: 120px;
    background: url(www_fanwo_top/templatemo_menu_divider.png) right center no-repeat;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
}

.templatemo_menu_home {
    float: left;
    width: 100px;
    height: 40px;
    padding: 80px 0 0 0;
    background: url(www_fanwo_top/templatemo_menu_home.png) no-repeat;
    background-position: center 10px;
    text-align: center;
}

.templatemo_menu_member {
    float: left;
    width: 100px;
    height: 40px;
    padding: 80px 0 0 0;
    background: url(www_fanwo_top/templatemo_menu_member.png) no-repeat;
    background-position: center 10px;
    text-align: center;
}

.templatemo_menu_about {
    float: left;
    width: 100px;
    height: 40px;
    padding: 80px 0 0 0;
    background: url(www_fanwo_top/templatemo_menu_about.png) no-repeat;
    background-position: center 10px;
    text-align: center;
}

.templatemo_menu_content {
    float: left;
    width: 100px;
    height: 40px;
    padding: 80px 0 0 0;
    background: url(www_fanwo_top/templatemo_menu_content.png) no-repeat;
    background-position: center 10px;
    text-align: center;
}

#templatemo_menu a:hover,
#templatemo_menu .current {
    color: #F90;
    text-decoration: none;
}
/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */
#templatemo_menu a {
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.www_fanwo_top {
    background: none;
}

.templatemo_one_col {
    width: 900px;
    margin: 0 0 15px 0;
    float: left;
}

.templatemo_one_col img {
    border: 5px solid #6f6f6c;
    float: right;
    margin: 0 0 10px 10px;
}

.templatemo_two_col {
    width: 440px;
    float: left;
}

.templatemo_two_col img {
    border: 5px solid #6f6f6c;
    float: left;
    margin: 0 10px 10px 0;
}

/* 第three个大图属性 */
.templatemo_three_col {
    width: 440px;
    float: left;
    margin: 15px 0 10px 15px;
}

.templatemo_three_col img {
    border: 5px solid #6f6f6c;
    float: left;
    margin-right: 10px;
}

.templatemo_right {
    float: right;
    width: 440px;
}

.templatemo_four_col {
    float: left;
    width: 217px;
}

.templatemo_h_line {
    background: url(www_fanwo_top/templatemo_h_line.png) center;
    width: 900px;
    height: 2px;
    margin: 0 0 15px 0;
}

.templatemo_v_line {
    float: left;
    background: url(www_fanwo_top/templatemo_v_line.png) no-repeat center;
    height: 135px;
    width: 10px;
}

#templatemo_css_fanwo_top {
    width: 100%;
    color: #fbfbfb;
    margin: 0;
    padding: 0 0 20px 0;
    font-size: 13px;
    text-align: center;
}

.templatemo_list {
    list-style: none;
    padding: 0 0 0 25px;
}

.templatemo_list li {
    color: #fbfbfb;
    font-size: 12px;
    font-family: Tahoma, Geneva, sans-serif;
    background: url(www_fanwo_top/templatemo_bullet.png) no-repeat;
    padding: 0 0 5px 22px;
    height: 18px;
}

.css_fanwo_top {
    margin-top: 550px;
}

.css_fanwo_top a {
    color: #ffff00;
    text-decoration: under;
}

.css_fanwo_top a:hover {
    color: #FFFF00;
    text-decoration: underline;
}

#templatemo_bottom {
    margin-top: 28px;
    float: left;
    background: url(www_fanwo_top/templatemo_bottom.jpg) bottom repeat-x;
    height: 18px;
    width: 100%;
}

.cleaner {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}
/*css From:css.134920.xyz */
/* 文章页：https://blog.fanl.cn/archives/280.html */

css全外链，一些img和样式加载不出来就是网速不行
有网情况下直接交index就可以实现全加载（已测试）

:@(想一想) 参考别全copy，出事的话不关我的事哈

当前页面是本站的「Baidu MIP」版。发表评论请点击：完整版 »

© 2024 MIP for Typecho v0.8 , Designed by Holmesian.