SasukasaWorks!

Sasukasa NetWork

HTML

發表於 分類於 Valine： 
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 lang="en">
    <head>
        <meta charset="utf-8" />
        <link href="css/first.css" rel="stylesheet"/>
        <style>        	
        </style>
    </head>
    <body>
        <div id="container">
            <header>
                <!-- 添加logo和导航内容 -->
                <div id="logo">
                    <img src="imgs/imga/logo.png" />
                </div>
                <div id="nav">
                    <a>1</a>
                    <a>2</a>
                    <a>3</a>
                    <a>4</a>
                    <a>5</a>
                    <a>6</a>
                    <a>7</a>
                    <a>Login</a>
                </div>
            </header>
            <section>
                <div id="adv">
                    <marquee>
                        A.D. 4415年 创造之神Bagnard认为人类是祸害之源，打算创造与月球可共存的新种族 A.D 4417年 关爱人类至善‘拉邦’和物质之神‘艾特啦’合力攻击 Bagnard 将他们消灭的同时被封印起来。此次的神之战，让大地再次荒芜，幸免于难的少量人类开始努力事宜新环境 A.D 4418 年 开始使用新的年号 L.C 0年
                    </marquee>
                </div>
                <div id="pc">
                    <!-- 添加游戏内容 -->
                    <div id="content">
                        <a href="second.html" target="_blank"><h2><span class="game">GAME1</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME2</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME3</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME4</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME5</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME6</span></h2></a>
                        <a href="second.html" target="_blank"><h2><span class="game">GAME7</span></h2></a>
                    </div>
                </div>
                <div id="phone">
                    <p>
                        手机游戏
                    </p>
                    <ul>
                        <li>
                            <img src="imgs/imga/mb1.jpg" />
                            <span>进入官网</span>
                        </li>
                        <li>
                            <img src="imgs/imga/mb2.jpg" />
                            <span>进入官网</span>
                        </li>
                        <li>
                            <img src="imgs/imga/mb3.jpg" />
                            <span>进入官网</span>
                        </li>
                        <li>
                            <img src="imgs/imga/mb4.jpg" />
                            <span>进入官网</span>
                        </li>
                        <li>
                            <img src="imgs/imga/mb5.jpg" />
                            <span>进入官网</span>
                        </li>
                        <li>
                            <img src="imgs/imga/mb6.jpg" />
                            <span>进入官网</span>
                        </li>
                    </ul>
                </div>
            </section>
            <footer>
            </footer>
        </div>
    </body>
</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
173
174
175
176
177
178
179
180
181
*, a {
	font-family: "微软雅黑";
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	list-style: none;
	color: #333;
}
#adv {
	width: 1350px;
	height: 450px;
	background: url(../imgs/imga/show.jpg);
	background-size: 110% 100%;
	position: relative;
}
marquee {
	position: absolute;
	top: 400px;
	left: 200px;
	width: 950px;
	height: 20px;
	padding: 5px;
	background: rgba(255,255,255,0.1);
	color: white;
	border-radius: 5px;
	font-family: "微软雅黑";
}
#container {
	width: 1350px;
	margin:auto;
}
#phone li img {
	border-radius: 10px;
}
header {
	width: 1350px;
	height: 100px;
	position: relative;
}
#logo {
	float: left;
	width: 300px;
	height: 100px;
}
#nav {
	float: right;
	width: 1000px;
	height: 100px;
	text-align: center;
}
#nav a {
	display: inline-block;
	width: 100px;
	height: 40px;
	text-align: center;
	margin: 30px 10px;
	font-size: 16px;
	line-height: 2;
	color: #333;
}
#nav a:hover {
	color: skyblue;
}
#nav a:last-child {
	border: 1px solid lightgray;
	border-radius: 20px;
	height: 30px;
	width: 80px;
}
#pc>div {
	float: left;
}
#pc>div h2 {
	box-shadow: 0px 0px 10px black;
	float: left;
}
#pc>div h2 span {
	display: inline-block;
	width: 270px;
	height: 35px;
	background-color: rgba(255,255,255,0.8);
}

#phone p {
	display: inline-block;
	border-left: 5px skyblue solid;
	padding-left: 20px;
	margin-top: 40px;
	width: 1200px;
	height: 30px;
	font-size: 20px;
	text-align: left;
}

#phone {
	position: relative;
	width: 1350px;
	height: 350px;
	background-color: white;
	text-align: center;
}
#phone ul {
	width: 1350px;
	height: 380px;
}
#phone li span {
	padding: 5px;
	color: #333;
}
section {
	position: relative;
	width: 1350px;
	height:1900px;
	background-color: lightgray;
}
footer {
	background-size: 100% 100%;
}
#phone li {
	display: inline-block;
}


#pc {
	background: url(../imgs/imga/bgm.png) no-repeat;
	background-position: 70px 50px;
	background-size: 89%;
	width: 1350px;
	height: 1100px;
}


#phone li {
	width: 110px;
	height: 160px;
	margin: 20px 50px;
}

/* 在下方写你的代码：设置样式 */
#logo img{
	width: 120px;
            height: 100px;
            margin: 0px 40px;
}
a{
	<a href="second.html" target="_blank">

	
}
/* first.css */
#logo img {
    width: 120px;
    height: 100px;
    margin: 0;
    margin: 0 40px;
}

#content {
    padding: 50px 70px;
    width: 1200px;
}

#content h2 {
    width: 270px;
    height: 470px;
    margin: 15px;
}

.game {
    padding-top: 10px;
    margin: 140px 0;
    text-align: center;
}

footer {
    height: 100px;
    background-image: url(../imgs/imga/footbg.png);
}



Miku可爱，给她大米！