CSS
一只野生饭卡丘
这个作者很懒,什么都没留下…
展开
-
前端——菜鸟网站横向CSS导航条菜单:带小三角形
之前看到很多网页的导航条都会有小三角形,一直好奇是如何实现的,正好前些天做的菜鸟教程首页的导航栏也有小三角形,就研究了一下它的实现方法。菜鸟教程首页导航如下图:其实实现这个功能也挺简单。首先写一个大的div_nav,而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。背景色的设置代码如下:.blue #slat...原创 2018-09-23 12:15:09 · 4566 阅读 · 1 评论 -
前端——用div画菜鸟网站首页导航条“小三角”
今天学到一个新的知识点——用div来画“三角”。之前本帅博主写过一篇《前端——菜鸟网站横向CSS导航条菜单:带小三角形》,里面也有介绍如何制作小三角形,不过它是用的现成的小三角图片,虽然也可以用,但是毕竟做网站的人,什么情况都可能会遇到,因此,还是自己画一个“三角”比较好。下面就介绍一下如何用div画菜鸟网站首页导航条的小三角形。菜鸟网站首页导航条如下:可以看到这里有一个小三角...原创 2018-10-13 23:31:02 · 1533 阅读 · 0 评论 -
前端——css块级元素和行内元素的区别详细解析
BIU~biu~biu~biu~块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别。 常见块级元素:div p form ul ol li 等; 常见的行内元素:span strong em;它们的区别主要有以下几点:1.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行。这一点在进行页面布局...原创 2018-10-13 12:13:07 · 1004 阅读 · 0 评论 -
前端——css参考样式集合
一. 字体属性:(font)1. 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD2. 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)3. 行高 {line-height: normal;}(正常) 单位:PX、PD、EM4. 粗细 ...原创 2018-09-23 10:35:35 · 523 阅读 · 0 评论 -
前端——CSS:浅谈对float的理解
我之前仿做百度首页,将整个页面整体布局完并写好之后,发现我的网页中的部分块会随着网页大小的变化而移位。我尝试了很多方法,调完之后,还是发现有一个块始终没有办法乖乖到我预想的位置。如下所示:div_foot这个块,按我的想法是应该在百度一下这个框下边的,但是不知道为什么总是在上面,如果我调整margin-top的数值,它也是以顶端为基准。在仔细查看了代码之后,终于发现,原来它前边的di...原创 2018-09-23 00:38:05 · 1619 阅读 · 1 评论 -
前端——如何用绝对定位(position:absolute)完美定位布局及其注意事项
在布局的过程中我们经常用到绝对定位,很多初学者在一开始用绝对定位经常会达不到预期的效果,因为它们往往会忽略使用绝对定位的两个条件。什么?使用绝对定位还要条件???当然要啦!代码又没有脑子,没法自己思考应该定位到哪里。为了使用的时候方便,使用绝对定位的时候要满足两个条件。在讲这两个条件的之前,我们要先提一个概念——标准流。什么是标准流呢?标准流(normal flow),也被称为...原创 2018-10-12 14:27:07 · 22023 阅读 · 1 评论 -
前端——拉勾网菜单:CSS+div实现鼠标滑动特效制作
昨天逛拉勾网,发现它首页菜单在鼠标移上去之后会出现二级子菜单,正好最近在整理HTML的知识,就仿照这拉勾网首页的菜单写了大体的框架。原网页如下:如果鼠标滑过相应的区域,会出现相应的二级子菜单。1、布局分析这个菜单的布局特别明显,就是一个大的div_leftmenu,然后再在该div中设置各类小的div。相关的属性可以在拉勾网的源代码上找到。在每个小块中,如“技术”块,又分为...原创 2018-09-26 21:55:45 · 1327 阅读 · 1 评论 -
前端——margin和padding的使用
今天学盒模型,学了两个最重要的元素:margin和padding。盒模型是布局中至关重要的一个东西,基本上只要掌握了盒模型,布局就没有大碍。而margin和padding作为盒模型里面极其重要的两个元素,弄懂这两个东西,就基本上弄懂了盒模型,也基本上具备了快速布局的能力。盒模型如下图:Margin - 边界外的透明区域。 Border - 边框在填充和内容周围。 Padding...原创 2018-09-21 13:30:27 · 1458 阅读 · 0 评论 -
前端——CSS3中三种清除浮动(float)影响的方式
float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决。但是凡是好用的,也容易出错。比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0等等。这里介绍一下CSS3中三种清除浮动的方式。1.增加一个空的标签(div 或 br等都行),通过clear:both语句消除float对后面元素的影响。示例:<div cl...原创 2018-10-03 16:19:27 · 5112 阅读 · 0 评论 -
前端——使用外部CSS样式单的两种方法:link和@import的比较
写代码最重要的一点便是可读性要高,如果我们把所有的代码都写在一个程序里面,那么当出现问题的时候就会对我们排错造成一定的困扰。因此,在写网页的时候我们可以通过CSS样式单来控制HTML文档的显示。这里有如下四种使用CSS样式单的方式:链接外部样式文件 彻底将样式文件与HTML文档分离,样式文件需要额外引入,一批样式可控制多份文档。 导入外部样式文件 功能与上一种类似,只是用@im...原创 2018-09-20 22:09:48 · 708 阅读 · 0 评论 -
前端——GitHub登录界面和首页制作
程序员当然少不了运用GitHub,这正好在复习前端知识,就做了一个GitHub的登录界面和首页。登录界面如下:我做的这个网页并没有提交表单的功能,只是简单地在button中添加了超链接。点击Sign in 按钮之后会跳转到首页。首页界面如下: 下面是源代码。登录界面源代码:<!DOCTYPE html><html><meta...原创 2018-10-02 16:11:11 · 4230 阅读 · 1 评论 -
前端——“一看就会的”菜鸟教程网站首页制作!
之前在复习网页制作,仿照菜鸟教程的首页写了一个仿菜鸟首页。效果如下: 制作网页之前先布局。原网页如下:分析该网站的布局,我们可以发现,菜鸟教程的首页主要有四个模块,分别是顶端,顶端导航, 左边菜单,右边菜单内容。先在原网站查看源码,找到相应模块的参数,根据这些参数来设置自己的模块,这样就可以增加自己网页与原网页的相似度。1、顶端LOGO和搜索框顶端LOGO和文本框的制作...原创 2018-09-26 13:21:58 · 23059 阅读 · 1 评论 -
前端——设置列表中不同类型的列表标记
列表分为两种:有序列表和无序列表。这两种列表的列表标记也不一样。它们的列表标记可以用list-style-type来设置。有序列表常用的有decimal、lower-roman、higher-roman等;无序列表常用的有disco、square、circle等。1、有序类表语法示例:<html><head><style type="text/css...原创 2018-09-25 21:37:36 · 1173 阅读 · 0 评论 -
前端——HTML5之input属性
各大网页都要用到输入框,用以提交各类信息。这些功能大部分都是由html中的input来完成的。H中新增段了input属性,这里总结一下input的几种使用类型。1、urlurl类型用于包含url地址的输入域,或者说,用于应该包含url地址的输入域,它在提交表单的时候会自动验证url域的值。语法实例:index:<input type="url"name=“user_url”/...原创 2018-09-25 21:14:45 · 1416 阅读 · 0 评论 -
前端——用Canvas绘制矩形
CanvasRenderingContext2D提供了两个方法绘制几何图形;fillRect(double x,double y,double width,doubke height)填充一个矩形区域strokeRect(double x,double y,double width,double height)绘制一个矩形边框也就是说,CanvasRenderingC...原创 2018-09-19 23:41:22 · 2247 阅读 · 0 评论 -
前端——用Canvas绘制折线图
通过CanvasRenderingContext2D对象能够获得绘制矩形的方法,但是想要绘制圆形椭圆等图形,必须在canvas上启用路径,借用路径来绘制图形。而绘制折线图最主要用到的就是 moveTo()和lineTo()。这两种方法很好区分:moveTo(double x,double y)把Canvas的当前路径的结束点移动到x、y对应的点。lineTo(double...原创 2018-09-19 23:11:29 · 2871 阅读 · 0 评论 -
前端——HTML5新增的拖放API
HTML新增了的关于拖放的API,通过拖放API可以让HTML页面中的任何元素都变成可以拖动的,通过拖放机制可以开发出更加友好的人机交互界面。拖放操作分为两个动作:拖和放。启动拖动在HTML中,&amp;amp;amp;lt;img…/&amp;amp;amp;gt;元素默认时可以拖动的;而&amp;amp;amp;lt;a…/&amp;amp;amp;gt;元素只要设置了href属性,则也默认为可以拖动。如下代码:对于原创 2018-09-19 00:40:21 · 1007 阅读 · 0 评论 -
前端——CSS:设置元素背景
设置元素背景一共分为两类,一类是设置元素背景颜色,一类是设置元素背景图片。1、设置元素背景颜色元素背景颜色通过background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。该属性可以为所有元素设置背景色,比如body,以及em这类行内元素。background-color无法被继承,如果不设置颜色,它默认为transparent,即透明背景色。如果该元素有父元素,...原创 2018-09-23 13:17:15 · 2589 阅读 · 0 评论 -
前端——子元素覆盖父元素的边框的四种方式
平常我们在浏览网站的时候经常会看到这样的菜单栏:看到这个,有些人不禁会想,这是如何做的呢???有人说:“border!!!!”对,的确是border,但是要怎么用呢???上面一共有三个div,莫非要给三个div都设置border属性?那也忒麻烦了~这里本帅博主给大家介绍几种更高富帅的方法~1.子元素定位 遮盖父元素的border-bottom 写一个div,颜色为白...原创 2018-10-15 22:04:29 · 10893 阅读 · 0 评论