个人网站建立-1.7

1.常用网站板坏丰富

1.统计常用网站的网址和图片

 

2.添加图片超链接：

            <div id="self">
                <h3>生活网站</h3>
                <hr />
                <a href="http://www.baidu.com" target="_blank"><img src="img/baidu.jpg" alt="百度" title="百度"></a>
                <a href="https://www.jd.com/" target="_blank"><img src="img/jingdong.jpg" alt="京东" title="京东"></a>
                <a href="https://www.taobao.com/" target="_blank"><img src="img/taobao.jpg" alt="淘宝" title="淘宝"></a>
            </div>
            <br />
            <div id="work">
                <h3>工作网站</h3>
                <hr />
                <a href="https://www.csdn.net/?spm=1010.2135.3001.4476" target="_blank"><img src="img/csdn.png" alt="CSDN" title="CSDN"></a>
                <a href="https://portal.cdtu.edu.cn/" target="_blank"><img src="img/cdtu.jpg" alt="网上事务大厅" title="网上事务大厅"></a>
                <a href="http://www.tonymmm.com/?mod=login" target="_blank"><img src="img/tony.jpg" alt="tony" title="代跑"></a>
                <a href="http://www.ouba.icu" target="_blank"><img src="img/ouba.jpg" alt="ouba" title="网课"></a>
            </div>

3.使用css进行修饰

#self{clear: both;
    height: 200px;
    width: 330px;
    position: relative;
    left: 57px;
    top: 20px;
}
#self a img{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #55aaff;
}
#work{clear: both;
    height: 100px;
    width: 430px;
    position: relative;
    left: 57px;
}
#work a img{
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #55aaff;
}

（清除浮动，设置图片像素，使用relative进行定位）