ZhangYang's Blog

CSS项目

发表于 | 分类于

个人网站

代码

浏览

个人作品展示

代码

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="layout">
    <header>
      <h1>我的项目</h1>
      <p>一句话介绍项目</p>
    </header>
    <main>
      <ul class="nav">
        <li><a href="#" class="active">项目一</a></li>
        <li><a href="#" class="active">项目二</a></li>
        <li><a href="#" class="active">项目三</a></li>
        <li><a href="#" class="active">项目四</a></li>
        <li><a href="#" class="active">项目五</a></li>
      </ul>
      <div class="ct">
        <img src="http://oqev4hx8u.bkt.clouddn.com/cs-1.jpg" alt="我的项目">
      </div>
    </main>
    <footer>
      <ul class="explain">
        <li><a href="#">查看码源</a></li>
        <li><a href="#">使用说明</a></li>
      </ul>
      <p>作者：<a href="#">我</a></p>
    </footer>
  </div>
</body>
</html>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul,li{
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  background: #fff2e3;
}
.layout {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  color:#87968e;
}
.nav > li,
.explain > li {
  display: inline-block;
  margin: 5px;
}
.nav > li > a,
.explain > li > a{
  display: block;
  background: #72b890;
  padding: 5px 10px;
  text-decoration: none;
  color: #fff;
}
.nav > .active {
  opacity: 0.75;
}
.ct{
  margin-top: 30px;
}
.ct > img {
  width: 450px;
}
.explain {
  margin-top: 30px;
}
footer a {
  color: #72b890;
  text-decoration: none;
}

效果

image

个人网站

代码

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="layout">
    <header>
      <img src="http://oqev4hx8u.bkt.clouddn.com/cs-1.jpg" alt="头像">
      <div class="avatar">
        <h1>张扬</h1>
        <p>应聘前端</p>
      </div>
      <div class="contacts">
        <h3>联系方式</h3>
        <table>
          <tr>
            <th>地址:</th>
            <td>广东省广州市</td>
          </tr>
          <tr>
            <th>电话:</th>
            <td>13539624211</td>
          </tr>
          <tr>
            <th>邮箱:</th>
            <td>zy343134464@163.com</td>
          </tr>
          <tr>
            <th>网址</th>
            <td>https://github.com/zy343134464</td>
          </tr>
        </table>
      </div>
    </header>
    
    <main>
      <div class="work">
        <h2>工作经历</h2>
        <table class="tab">
          <tr>
            <th>
              <div class="cir"></div>
            </th>
            <td>
              <h3>公司名称 / <span>2014 - 2015</span></h3>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制</p>
            </td>
          </tr>
          <tr>
            <th>
              <div class="cir"></div>
            </th>
            <td>
              <h3>公司名称 / <span>2013 - 2014</span></h3>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制</p>
            </td>
          </tr>
          <tr>
            <th>
              <div class="cir"></div>
            </th>
            <td>
              <h3>公司名称 / <span>2012 - 2013</span></h3>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制</p>
            </td>
          </tr>
        </table>
      </div>
      <div class="edu">
        <h2>教育经历</h2>
        <table class="tab">
          <tr>
            <th>
              <div class="cir"></div>
            </th>
            <td>
              <h3>大学 / <span>2014 - 2015</span></h3>
              <h6>机械专业</h6>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制</p>
            </td>
          </tr>
          <tr>
            <th>
              <div class="cir"></div>
            </th>
            <td>
              <h3>高中 / <span>2013 - 2014</span></h3>
              <h6>设计专业</h6>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；Html/css代码质量控制</p>
            </td>
          </tr>
        </table>
      </div>
    </main>
    
    <footer>
      <div class="extra">
        <h2>活动经历</h2>
        <table class="tab">
          <tr>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              <h3>活动一</h3>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；</p>
            </td>
          </tr>
          <tr>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              <h3>活动二</h3>
              <p>Web应用的设计与开发；Javascrip数据处理；复杂Ajax交互开发；Web接口设计与开发；</p>
            </td>
          </tr>
        </table>
      </div>
      <div class="skill">
        <h2>掌握技能</h2>
        <table>
          <tr>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              HTML &#38; CSS
            </td>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              JQUREY
            </td>
          </tr>
          <tr>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              JAVASCRIPT
            </td>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              PHOTOSHOP
            </td>
          </tr>
          <tr>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              SLIM
            </td>
            <th>
              <div class="plus"></div>
            </th>
            <td>
              ILLUSTRATOR
            </td>
          </tr>
        </table>
      </div>
    </footer>
  </div>
</body>
</html>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* 居中布局 */
.layout {
  width: 800px;
  border: 5px dotted;
  margin: 0 auto;
  padding: 20px;
  background: #FFF8DC;
  font-family: Microsoft YaHei;
}
/* 头部区域 */
header > img {
  width: 150px;
  border-radius: 150px;
  margin: 20px;
  vertical-align: middle;
}
.avatar {
  display: inline-block;
  vertical-align: middle;
}
.avatar > p {
  font-weight: bold;
  font-size: 24px;
}
.contacts {
  float: right;
}
.contacts > h3 {
  border-bottom: 4px solid #000;
}
.contacts th {
    width: 60px;
}
.contacts td {
    width: 200px;
}
/* 内容区域 */
.work > h2,
.edu > h2,
.extra h2,
.skill h2 {
    width: 350px;
    border-bottom: 1px solid #aaa;
    padding: 10px;
    font-size: 1.4rem;
}
.tab {
    margin-top: 45px;
    margin-left: 40px;
    border-left: 1px solid;
}
.tab th {
    width: 50px;
    vertical-align: top;
}
.tab span {
    color: #aaa;
}
.cir {
    width: 15px;
    height: 15px;
    background: #000;
    border-radius: 20px;
    position: relative;
    left: -11px;
    top: 6px;
}
h3{
  margin: 0;
  font-size: 1.25rem;
}
.edu h6{
  margin: 0;
  font-weight: normal;
  font-size: 1rem;
  color: #aaa;
}
/* 尾部区域 */
.extra {
    display: inline-block;
    width: 380px;
}
.plus::before {
    display: table-cell;
    content: '+';
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    border-radius: 30px;
    vertical-align: middle;
    text-align: center;
}
.skill {
    width: 380px;
    float: right;
}
footer .tab {
    border: none;
}
.skill td {
    padding: 30px 20px;
}

效果

image

一个响应式页面

兼容iPhone5、iPad、PC端、PC宽屏四个版本

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>
<head lang="zh-Hans">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>响应式页面</title>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <section id="nav">
        <div class="img logo"></div>
        <ul>
            <li>团结</li>
            <li>友爱</li>
            <li>勤奋</li>
            <li>好学</li>
        </ul>
    </section>
    <section id="banner">
        <div class="oneHead">
            <h2>标题</h2>
        </div>
        <div class="twoHead">
            <h2>标题</h2>
            <h2>标题</h2>
        </div>
        <p>文字</p>
        <p>文字</p>
    </section>
    <section id="main">
        <ul>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
            <li>
                <div class="img">图片</div>
                <h2>标题</h2>
                <p>文字</p>
            </li>
        </ul>
    </section>
</body>
</html>

CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*nav模块*/
body{
    margin: 0;
    padding: 0;
}
#nav{
    background-color: #fff;
    text-align: center;
}
#nav > .logo{
    display: inline-block;
    background:#d8d8d8;
    min-width:73px;
    height:73px;
    border-radius:100%;
    margin-top: 60px;
}
#nav > ul{
    list-style: none;
    padding: 0;
    margin-top: 24px;
}
#nav > ul > li{
    display: inline-block;
    min-width: 128px;
    line-height: 24px;
    margin: 10px;
    background: #d8d8d8;
}
/*banner模块*/
#banner{
    background:#efefef;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
}
#banner h2{
    display: inline-block;
    background:#d8d8d8;
    border-radius:14px;
    min-width:200px;
    line-height:40px;
    margin-top: 10px;
    margin-bottom: 10px;
}
#banner .oneHead{
    display: none;
}
@media (min-width: 768px) {
    #banner .twoHead{
        display: none;
    }
    #banner .oneHead{
        display: block;
    }
    #banner h2{
        min-width: 376px;
    }
}
#banner > p{
    background:#e8e8e8;
    border-radius:14px;
    max-width:250px;
    line-height:24px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    #banner > p{
        max-width: 536px;
    }
}
/*main模块*/
#main{
    padding-top: 30px;
    margin: 0 16px;
}
#main > ul{
    margin:0;
    padding: 0;
    list-style: none;
}
@media (min-width: 768px) {
    #main > ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #main > ul > li{
        width: 49%;
        box-sizing: border-box;
        /*max-width: 288px;*/
    }
}
@media (min-width: 1024px) {
    #main > ul > li{
        width: 32%;
        box-sizing: border-box;
        /*max-width: 288px;*/
    }
}
@media (min-width: 1200px) {
    #main > ul{
        max-width: 928px;
        margin-left:auto;
        margin-right:auto;
        /*box-sizing: border-box;*/
        /*max-width: 288px;*/
    }
}
#main > ul > li > .img{
    background:#d8d8d8;
    border-radius:4px;
    height:180px;
}
#main > ul > li > h2{
    font-size: 16px;
    background:#bcbcbc;
    border-radius:4px;
    max-width:204px;
    line-height:24px;
}
#main > ul > li > p{
    background:#ececec;
    border-radius:4px;
    line-height:16px;
}

待续