1-Web学习之制作自己的主页

作者: 学游泳的小黑 | 来源:发表于2018-01-05 09:03 被阅读17次

上个月看了一些html、css、JavaScript的基础东西。今天闲着没事自己整个自己的网页。
记录下自己的学习里程吧、方便以后回忆看看。

html设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SYOHome</title>

    <link rel="stylesheet" type="text/css" href="./all.css">
    <base target="_blank">
</head>

<body>
    <div class="BaiduImage">
        <a href="http://www.baidu.com/">
            <img class="Baidu" src="https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png">
        </a>
    </div>
    

    <div class="SearchBox">
        <form action="http://www.baidu.com/baidu" target="_blank">
            <input class="SearchText" type=text name=word size=30>
            <input class="SearchButton" type="submit" value="百度一下">
        </form>
    </div>

    <div class="BaseBox">
        <div class="iOS">
            <h2>iOS 板块</h2>
            <div class="leftDiv"><span class="head">个人</span></div>
            <table class="rightT">
                <tr>
                    <td>
                        <a href="http://www.jianshu.com/" class="rightItem">
                            <img src="https://ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/6000.png?3" height="16" width="16" />
                        </a>
                        <a href="http://www.jianshu.com/">我的简书</a>
                    </td>
                    <td>
                        <a href="https://weibo.com/" class="rightItem">
                            <img src="https://ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/6000.png?3" height="16" width="16" />
                        </a>
                        <a href="https://weibo.com/">我的微博</a></td>
                    <td>
                        <a href="https://github.com" class="rightItem">
                            <img src="https://ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/6000.png?3" height="16" width="16" />
                        </a>
                        <a href="https://github.com">我的github</a>
                    </td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

            <hr class="line">
            <div class="leftDiv"><span class="head">博主</span></div>
            <table>
                <tr>
                    <td><a href="https://onevcat.com/">喵神</a></td>
                    <td><a href="http://blog.devtang.com/">唐巧</a></td>
                    <td><a href="http://zhoulingyu.com/">小鱼周凌宇</a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

            </table>

            <hr class="line">
            <div class="leftDiv"><span class="head">论坛</span></div>
            <table>
                <tr style="td">
                    <td><a href="http://www.hangge.com/">航歌</a></td>
                    <td><a href="http://www.jianshu.com/">简书关注</a></td>
                    <td><a href="http://www.cocoachina.com/">CocoaChina</a></td>
                    <td><a href="http://www.oschina.net/">开源中国</a></td>
                    <td><a href="https://www.objc.io/">objc.io</a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

            <hr class="line">
            <div class="leftDiv"><span class="head">辅助</span></div>
            <table>
                <tr>
                    <td><a href="https://developer.apple.com/">Apple ID</a></td>
                    <td><a href="https://github.com/">GitHub</a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>

        <div class="Web">
            <h2>Web 板块</h2>
            <div class="leftDiv"><span class="head">基础</span></div>
            <table>
                <tr>
                    <td><a class="gray" href="">HTML</a></td>
                    <td><a class="gray" href="">CSS</a></td>
                    <td><a class="gray" href="">JavaScript</a></td>
                    <td><a class="gray" href="">jQuery</a></td>
                    <td><a class="gray" href="">HTML5新特性</a></td>
                    <td><a href="http://w3school.com.cn/tags/index.asp">HTML参考手册</a></td>
                    <td><a class="gray" href=""></a></td>
                    <td></td>
                </tr>
            </table>

            <hr class="line">
            <div class="leftDiv"><span class="head">论坛</span></div>
            <table>
                <tr>
                    <td><a href="http://www.runoob.com/">菜鸟教程</a></td>
                    <td><a href="http://w3school.com.cn/index.html">w3school</a></td>
                    <td><a href="http://www.angularjs.cn/">angularjs</a></td>
                    <td><a class="gray" href=""></a></td>
                    <td><a class="gray" href=""></a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>  

        <div class="Other">
            <h2>其他</h2>
            <div class="leftDiv"><span class="head">学习</span></div>
            <table>
                <tr>
                    <td><a class="gray" href="">英语学习</a></td>
                    <td><a class="gray" href="">业务知识</a></td>
                    <td><a class="gray" href="">会计知识</a></td>
                    <td><a class="gray" href="">管理知识</a></td>
                    <td><a class="gray" href=""></a></td>
                    <td><a class="gray" href=""></a></td>
                    <td><a class="gray" href=""></a></td>
                    <td><a class="gray" href=""></a></td>
                    <td><a class="gray" href=""></a></td>
                </tr>
            </table>

            <hr class="line">
            <div class="leftDiv"><span class="head">文章</span></div>
            <table>
                <tr>
                    <td><a href="http://www.jianshu.com/u/92eb338437ee">道长是名思维贩子</a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>  
</body>
</html>

CSS设置

 @charset "UTF-8";

html {
    font-family: "楷体";
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

body {
    color: #3c3c3c;
    height: 100%;
    width: 100%;
    background-color: #fff8ed;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0px;
    padding: 0px;
    background-image: url(https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin_zoom/137.jpg?2);
}

table {
    text-align: center;
    width: 90%;
    table-layout: fixed;
    margin-top: -5px;
    margin-bottom: 5px;
}

td {
    height: 30px;
    text-align: center;
}

th.head {
    width: 80px;
    color: red;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid;
    border-color: gray;
}

a {
    margin-top: -1px;
    text-decoration: none;
    color: black;
}
a.my {
    color: black;
    width: 40%;
    text-align: center;
    background-color: yellow;
}

a.gray {
    text-decoration: none;
    color: gray;
}

input {
    margin-top: 50px;
    margin-left: 25%;
    width: 75%;
    height: 35px;
    font-size: 18px;
    border: none;
}

div.BaseBox {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    filter: opacity(75%);
    min-width: 1000px;
    float: left;
    text-align: center;
    box-sizing: border-box;
}

div.iOS {
    padding-top: 5px;
    margin-top: 40px;
    background-color: white;
}

div.Web {
    padding-top: 5px;
    margin-top: 10px;
    background-color: white;
}

div.Other {
    padding-top: 5px;
    margin-top: 10px;
    margin-bottom: 40px;
    background-color: white;
}

hr.line {
    color: lightgray;
    width: 95%;
    margin-left: 2.5%; 
    margin-top: 10px;
    margin-bottom: 10px;
}

h2 {
    color: black;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.leftDiv {
    width: 8%;
    text-align: center;
    float: left;
}

span {
    margin-top: -1px;
}

span.head {
    font-size: 18px;
    height: 20px;
}

a.rightItem {
    margin-top: 0.5px;
    display: inline-block;
    vertical-align: middle;
}

input.SearchText {
    width: 80%; 
    padding: 0;
    margin: 0; 
    float: left; 
    box-sizing: border-box;
}

input.SearchButton {
    width: 20%; 
    padding: 0; 
    margin: 0; 
    float: right; 
    box-sizing: border-box;
}

div.SearchBox {
    width: 50%; 
    min-width: 650px;
    margin-left: 25%;
    margin-top: 20px;
    float: left;
    text-align: center;
    box-sizing: border-box;
}

img.Baidu {
    width: 270px;
    height: 129px;
    text-align: center;
}

div.BaiduImage {
    width: 50%; 
    min-width: 650px;
    margin-left: 25%;
    float: left; 
    text-align: center;
    box-sizing: border-box;
}

刚开始学习，自己用用自己做的，挺有成就感，相信随着技术的提高，设计也会更加完善。
对于新手提供下载地址以供参考（献丑了）：
1、个人主页制作

1-Web学习之制作自己的主页

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读