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

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

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学习之制作自己的主页

iOS 板块

Web 板块

其他

你可能感兴趣的:(1-Web学习之制作自己的主页)