WEB前端学习
关注
分享
扫一扫
文章平均质量分 61
结合案例进行学习
小鱼儿爱喝酒
自学程序员
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
14 盒子边框及盒子样式
1 盒子圆角边框使用border-radius：length；对边框的四个角进行设置<style type="text/css"> div { height: 100px; width: 200px; background-color: pink; border-radius:20px; } </style>原创 2021-06-11 12:35:53 · 247 阅读 · 0 评论 -
13 快报模块案例实战
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>品优购快报模块</title> <style type="text/css"> * { margin: 0; p.原创 2021-06-06 19:40:56 · 204 阅读 · 0 评论 -
12 某宝标签案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>实际案例</title> <style type="text/css"> body { background-color: aliceblue; } * { padding: 0; margin: 0; } .box { heig.原创 2021-06-06 16:14:24 · 160 阅读 · 0 评论 -
11 盒子模型
1 网页布局步骤网页布局过程：1 准备好相关的网页元素，网页元素基本都是盒子2 利用CSS设置好盒子样式，然后摆放在相应的位置上3 往盒子里面装上内容。盒子模型定义：就是HTML页面中的布局元素看作矩形盒子，也就是承装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。边框border：就是边框的粗细。内边距padding：就是content内容与边框的距离外边距margin：就是边框与边框之间的距离1.1原创 2021-06-05 23:35:46 · 251 阅读 · 0 评论 -
10 CSS特性及样式权重
1 CSS特性特性：层叠性、继承性、优先级1.1 层叠性：表示同样的选择器，后面的设置会覆盖前面的设置。<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS特性</title> <style type="text/css"> p {c原创 2021-06-03 20:18:27 · 138 阅读 · 0 评论 -
09 背景导航栏案例
代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>英雄联盟背景</title> <style type="text/css"> .nav a { display原创 2021-06-03 16:10:51 · 398 阅读 · 0 评论 -
08 背景设置
1 背景颜色 background-color默认情况下，背景颜色background-color：transparent； 表示无颜色，透明色。2 背景图片参数值 作用 repeat 背景图像在纵向和横向上平铺 no-repeat 背景图像不平铺 repeat-x 背景图像在横向上平铺 repeate-y 背景图像在纵向上平铺 背景平铺设置：background-repeat：repeat；背景图片设置 background-imag.原创 2021-06-03 16:02:59 · 1025 阅读 · 0 评论 -
07 淘宝侧边栏案例实战
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>侧边栏展示</title> <style type="text/css"> a { color:white; b.原创 2021-06-01 23:04:34 · 124 阅读 · 0 评论 -
06 元素显示模式
1. 块元素块元素：<h1>-<h6> , <P>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素。块级元素的特点：1 独占一行2 高度、宽度、内外边距可控3 宽度默认是容器的100%4 代表容器，里面可以放行内块或者块级元素注：1 文字类的元素内不能使用块级元素； 2 <P>标签主要用于存放文字，不能放块级元素，尤其不能放div；3 h1-原创 2021-06-01 22:33:55 · 110 阅读 · 0 评论 -
05 选择器
1. Emmet语法1. 生成标签直接输入标签名按tab键即可，比如div然后tab键，就可以生成<div></div>2.如果想要生成多个相同标签 加上*就可以，例如div*3就可以快速生成3个div3. 如果有服自己关系的标签，可以用> 比如 ul>li 就可以4. 如果有兄弟关系的标签，用 + 就可以，比如 div+p5. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以6. 如果生成div类名是有顺序的，可原创 2021-06-01 20:32:05 · 150 阅读 · 2 评论 -
04 CSS样式案例
1 选择器1.1 标签选择器p {color:red; font-size: 25px;}1.2 类选择器/* 类选择器 */.red {color: red; width: 50px; height: 50px; background-color: red;}.blue {color: blue; width: 50px; height: 50px; background-color: blue;}对应：body<div id="" class="red">..原创 2021-05-31 12:56:36 · 283 阅读 · 0 评论 -
03 表单案例实战
01 基础知识1 表单其中：action表示动作定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到 web 服务器上的网页。method表示提交的方式post，get<form action="action_page.php" method="POST"> </form>2 input其中：type表示类型（text、checkbox、button、password、checkbox、radio）maxle原创 2021-05-24 22:35:08 · 198 阅读 · 0 评论 -
02 表格学习
1 所用基础知识结构：<table border="" cellspacing="" cellpadding=""> <tr><th>Header</th></tr> <tr><td>Data</td></tr></table>说明：表格属性需要包含在<table></table>中；<tr&g...原创 2021-05-24 20:04:50 · 115 阅读 · 0 评论 -
01 图片链接学习
1 前端的基础知识主要包括：图片、链接、标题标签、段落标签 标题标签 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>段落标签<p></p>换行标签<br>其他标...原创 2021-05-23 23:39:36 · 256 阅读 · 0 评论