前端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS
download:
3w ukoou com
HTML5+CSS3+JS快速入门
- HTML用于创建网页的标准标记语言，使用 HTML 来建立自己的 WEB 页面内容，运行在浏览器上，由浏览器来解析。目前最新版本是HTML5，
- CSS用来表现网页样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合JS脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。目前最新版本是CSS3，
- JS是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，作为开发Web页面的脚本语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
-
HTML5基础-基本常用标签
-
CSS3基础- 常见样式、选择器
-
盒子模型
-
浮动详解
-
PC端学成在线页面开发
-
定位分类详解
-
CSS高级技巧(精灵图、字体图标、三角等）
-
常见布局技巧
-
HTML5CSS3提高-新属性新样式
-
页面开发流程规范
-
品优购项目开发流程规范
-
网页TDK标签SEO优化
-
网页logo SEO优化
-
品优购首页、列表页、注册页面开发
-
服务器概念
-
网站上传以及域名注册
前端必学 40个精选案例实战 - HTML+CSS小实战案例
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
4 <title>实验</title>
5 <style type="text/css">
6 *{margin:0;padding:0;}/*去掉页面样式*/
7 body{color:white;}
8 .content{
9 background-color:pink;
10 position:absolute;/*绝对定位*/
11 top:50%;
12 left:0;
13 width:100%;
14 height:400px;
15 margin-top:-200px;
16 overflow:hidden;/*隐藏滚动条*/
17 }
18 .main{
19 text-align:center;/*文本居中*/
20 max-width:600px;
21 height:400px;
22 padding:100px 0px;/*上下80px,左右为0*/
23 /*background:yellow;*//*验证div的位置*/
24 margin:0 auto;/*设置上右下左,居中显示*/
25 }
26 .main h1{
27 font-family:"楷体";/*设置字体*/
28 font-size:70px;/*设置字体大小*/
29 font-weight:2px;/*调整字体粗细*/
30 }
31 form{
32 padding:20px 0;
33 }
34 form input{
35 border:1px solid white;
36 display:block;
37 margin:0px auto 10px auto;/*上 右 下 左*/
38 padding:10px;
39 width:220px;
40 border-radius:30px;/*H5设置圆角边框*/
41 font-size:18px;
42 font-weight:300;
43 text-align:center;
44 }
45 form input:hover{
46 background-color:pink;
47 }
48 form button{
49 background-color:yellow;
50 border-radius:10px;
51 border:0;
52 height:30px;
53 width:50px;
54 padding:5px 10px;
55 }
56 form button:hover{
57 background-color:red;
58 }
59 </style>
60 </head>
61 <body>
62 <div class="content">
63 <div class="main">
64 <h1>Welcome</h1>
65 <form>
66 <input type="text" name="useid" placeholder="请输入账号"/>
67 <input type="password" name="pw" placeholder="请输入密码">
68 <button type="submit">登 录</button>
69 </form>
70 </div>
71 </div>
72
73 </body>
74 </html>
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习
网页设计先布局，搭建好大框架，然后进行填充，完成页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
a {
text-decoration: none;
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
color: #fff;
text-align: center;
line-height: 50px;
}
a:hover {
background-color: orange;
}
</style>
</head>
<body>
<!-- a*5 -->
<!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
<a href="#">导航4</a>
<a href="#">导航5</a>
</body>
</html>
