margin介绍及网页规划思路

15 篇文章 0 订阅
13 篇文章 0 订阅

MARGIN

margin用法 (外边距、边界)
1:margin在元素外围,不会撑大元素的大小
2:作用:控制元素与元素之间的间距。
3:给单一方向添加margin
margin-left/right/top/bottom
4 :margin设置方法:
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
5:margin:0 auto;
让当前元素在父元素里面左右居中。
6:margin常出现的bug
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下,给第一个子元素添加margin-top,会错误放在父元素上面。

盒子大小计算

盒子在网页中占有的真实空间:
占有的宽度:width+padding-left/right+border-left/right+margin-left/right
占有的高度:height+padding-top/bottom+border-top/bottom+margin-top/bottom
在这里插入图片描述
在这里插入图片描述

网页规划

1.元素的命名

a.划分外围结构:id选用驼峰式命名法或者语义化。
eg:newsLeft/news
b.版心的命名:连字符命名法。
eg:news-con
内容版快的命名:下划线命名法。
eg:news_left

2.css外部样式表

1.网页尽可能地使用外部样式表。
2.每一个页面都需要有属于自己的样式表。
3.每一个网站都拥有公共样式。
4.每一个网站至少拥有一个重置样式的样式表用来清除所有默认样式。

3.css外部样式表命名示例

index.css(首页样式表)
public.css(公共样式表)
reset.css(重置样式表)
外部样式表首行:1.@charset"utf-8";
首行说明:用来声明样式表所使用的语言。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据提供的引用内容,我们可以了解到QQ音乐网页的设计和布局思路。但是,由于版权问题,我们无法提供完整的QQ音乐网页制作代码。不过,我们可以提供一些制作网页的基本知识和技巧,帮助您更好地理解和学习网页制作。 制作网页的基本知识和技巧包括HTMLCSS和JavaScript等。其中,HTML网页的基础,用于定义网页的结构和内容;CSS用于定义网页的样式和布局;JavaScript用于实现网页的交互和动态效果。 以下是一个简单的HTML代码示例,用于创建一个网页的基本结构: ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">导航链接1</a></li> <li><a href="#">导航链接2</a></li> <li><a href="#">导航链接3</a></li> </ul> </nav> </header> <main> <section> <h1>内容标题1</h1> <p>内容1</p> </section> <section> <h1>内容标题2</h1> <p>内容2</p> </section> </main> <footer> <p>版权信息</p> </footer> </body> </html> ``` 在上面的代码中,`<!DOCTYPE html>`用于声明文档类型;`<html>`标签用于定义HTML文档;`<head>`标签用于定义文档头部,包括网页标题、字符集、视口等信息;`<body>`标签用于定义文档主体,包括网页的内容和结构;`<header>`、`<main>`和`<footer>`标签用于定义网页的头部、主体和底部;`<nav>`、`<ul>`和`<li>`标签用于定义导航栏和链接;`<section>`、`<h1>`和`<p>`标签用于定义网页的内容区域和标题、段落等。 除了HTML之外,CSS也是网页制作中不可或缺的一部分。以下是一个简单的CSS代码示例,用于定义网页的样式和布局: ```css body { font-family: Arial, sans-serif; background-color: #f0f0f0; } header { background-color: #333; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } nav a { color: #fff; text-decoration: none; } section { margin: 20px; padding: 10px; background-color: #fff; box-shadow: 0 0 5px #ccc; } h1 { font-size: 24px; margin: 0 0 10px; } p { font-size: 16px; line-height: 1.5; margin: 0; } ``` 在上面的代码中,`body`用于定义网页整体样式,包括字体、背景颜色等;`header`用于定义网页的头部样式,包括背景颜色、文字颜色、内边距等;`nav`、`ul`和`li`用于定义导航栏的样式和布局,包括列表样式、外边距、内边距等;`a`用于定义链接的样式,包括文字颜色、下划线等;`section`用于定义网页的内容区域的样式和布局,包括外边距、内边距、背景颜色、阴影等;`h1`和`p`用于定义标题和段落的样式,包括字体大小、行高、外边距等。 除了HTMLCSS之外,JavaScript也是网页制作中常用的一部分。以下是一个简单的JavaScript代码示例,用于实现网页的交互和动态效果: ```javascript var navLinks = document.querySelectorAll('nav a'); for (var i = 0; i < navLinks.length; i++) { navLinks[i].addEventListener('click', function(event) { event.preventDefault(); alert('你点击了导航链接:' + this.textContent); }); } ``` 在上面的代码中,`querySelectorAll`用于选择所有的导航链接;`addEventListener`用于为导航链接添加点击事件;`preventDefault`用于阻止链接的默认行为;`alert`用于弹出提示框,显示点击的链接文本内容。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值