企业实训_2019.4.9

最新推荐文章于 2021-12-02 15:51:19 发布

Alden_Han

最新推荐文章于 2021-12-02 15:51:19 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/weixin_43678956/article/details/89222629

版权

有关web学习的开始_企业实训_2019.4.9

- css

先copy上我的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="Test.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="box">
     <div id="banner">
         <img src="images/banner.gif" alt="博客世界" />
        </div>
 <div id="menu">
        <ul>
             <li><a href="#" target="_blank">首页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </div>
      <div id="main">
         <!--左边区域-->
         <div id="left">
<div class="guanyuwo">
                 <h3><a href="#">>>关于我</a></h3>
                    <hr>
        <p>&nbsp;</p>
            <p><img src="images/109395CF4-7.jpg" alt="我" align="middle" />
        </p>
            <p align="center"><img src="images/girl.gif" alt="我" />张梅
         </p>
<p align="center">重庆市 南岸区</p>
                    <p class = 'neirong'>
                       天微明，冬天的光透过窗，印在左手的无名指上。 回忆的颜色是透明的冷，于是，用窗口透入的薄薄的光暖一暖心。</p>
</div>
         </div>
         <div id="right">
            <div class="rizhi">
                 <h3><a href="#">>>日志</a></h3>
            </div>
           
            <div id="list">
            <ul>
                     <li>
                         <img src="images/ico4.gif" alt="小图标"/>
                            <a href="#">IMAX加长版《变形金刚》（Transformers）亲历简报</a>
                            <span>2007-09-25</span>
                        </li>
                        <li>
                         <img src="images/ico4.gif" alt="小图标"/>
                            <a href="#">《变形金刚》发烧友的看图说话（多图）</a>
                            <span>2007-09-22</span>
                        </li>
                        <li>
                         <img src="images/ico4.gif" alt="小图标"/>
                            <a href="#">《反恐王国》（The Kingdom）：生猛的空心弹</a>
                            <span>2007-09-22</span>
                        </li>
                        <li>
                         <img src="images/ico4.gif" alt="小图标"/>
                            <a href="#">《东方承诺》（Eastern Primises）：不动如山，暗流汹涌</a>
                            <span>2007-09-20</span>
                        </li>
                        <li>
                         <img src="images/ico4.gif" alt="小图标"/>
                            <a href="#">《妖精的旋律》（Elfen Lied）：日式YY的经典案例</a>
                            <span>2007-09-20</span>
                        </li>
             </ul>
             </div>
              <div class="xiangce">
                 <h3><a href="#">>>相册</a></h3>
            </div>
            <img src="images/1.jpg" alt="相册" width="215" height="300"/>
            <img src="images/2.jpg" alt="相册" width="215" height="300"/><img src="images/3.jpg" alt="相册" width="215" height="300"/></div>         
        </div>
        <div id="footer" style="background:url('footer.gif') no-repeat;width:100px;height:100px">
      
            <span>临沂大学出品 @2019-04-01</span>
     </div>
    </div>
</body>
</html>

css

**
在这里插入图片描述
css一插入就出错就放了图片

其实说实话很多东西都是仿照这以前的写出来的，再加上查资料和copy上一个css来写，但总归是大体做出来了，

但是还是面临着几个问题

1.对于日志的后面显示的时期span问题，我只能做到把它放到第二行，最后让它们都靠最右，但是这样有个问题就是会跟要求不符，要求在一行上，但我那样写会是两行。为了美观所以我就把它放了两行。。。
2. 对于最后的footer 我尝试了两种方式把footer.gif以背景图的方式放在footer里面但是都存在不显示的问题，不论是HTML里面写还是在css中都不显示。。。
3. 最后因为懒点，所以日志和相册背景颜色并没有按照要求来而是和菜单选择了一致的颜色！~~~~

Alden_Han

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
企业实训_2019.4.9

有关web学习的开始_企业实训_2019.3.19先copy上我的代码<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><link...
复制链接

扫一扫