HTML与CSS知识主题的文章列表，还有HTML与CSS知识的技术要点_第5页

前端基础-html（3）

一、列表标签1、ul（无序列表）标签 ul（unorderedlist）无序列表，ul下的子元素只能是li（listitem），如下示例：<ul><li>第一项</li><li>第二项</li&g...

代码星球 ·2021-02-25

前端基础-html（2）

一、字体标签字体标签包含：h1~h6、<font>、<u>、<b>、<strong>、<em>、<sup>、<sub>1）标题标题使用<h1>至<h6>标签进行定义。<h...

代码星球 ·2021-02-25

前端基础-html（1）

写在前面：前端后端C（client） &nbs...

代码星球 ·2021-02-25

html+ccs3太阳系行星运转动画之土星有个环，地球有颗小卫星

在上一篇《html+ccs3太阳系行星运转动画》中实现了太阳系八大行星的基本运转动画。太阳系又何止这些内容，为丰富一下动画，接下来增加“土星环”和“月球”来充盈太阳系动画。下面是充盈后的动画效果静态图。一、土星环修改原来土星的div，在外面放一个包裹层div，class设成saturn-container。...

代码星球 ·2021-02-25

html中，文件上传时使用的<input type="file">的样式自定义

Web页面中，在需要上传文件时基本都会用到<inputtype="file">元素，它的默认样式：chrome下： IE下：不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。根据用户的需求，设计风格，改变其显示样式的场合就比较多了。如果，要像下面一样做一个bootstrap风...

代码星球 ·2021-02-25

html+ccs3太阳系行星运转动画

做一个太阳系八大行星的运转动画，不包括行星的卫星，所有行星围绕太阳公转，行星采用纯色，暂时没有自转。效果静态图：动画中包括：太阳及各行星，运行轨道，行星公转动画。先画好草图，设计好大小和位置，根据公转周期计算好动画执行的时间。 html的结构:一个class为solarsys的div，作为太阳系容...

代码星球 ·2021-02-25

div+css3绘制基本图形

基本图形包括：矩形、圆角矩形、圆形、椭圆形、三角形、值线、弧这些图形的绘制用到了CSS圆角属性，不考虑IE8。下面的实现在chrome浏览器运行通过。 1.矩形比较简单，通过CSS设置宽度、高度、背景色即可。html:<divclass="rectangle"></div>css:.r...

代码星球 ·2021-02-25

css毛玻璃效果

毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然nonono了。毛玻璃无疑就是种模糊了，少不了filterblur。最终效果（chrome）：天气...

代码星球 ·2021-02-25

网页中多个图标在一张图片上，使用css将各图标显示

现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。当然了，像采用CDN，或者按照浏览器的并发...

代码星球 ·2021-02-25

html的块级、内联、内联块级元素基础

概念块级：block内联：inline内联块级：inline-block 在html元素中，元素会有display属性display属性默认值是block，那么该元素是块级元素。display属性默认值是inline，那么该元素是内联元素。没有元素的display默认值是inline-block。displa...

代码星球 ·2021-02-25

html的<meta>标签的作用

代码星球 ·2021-02-25

html的<!DOCTYPE>标签初窥

<!DOCTYPE>标签必须放在整个html文档的第一行，之后一行就是从<html>标签开始，所有浏览器都支持<!DOCTYPE>标签。<!DOCTYPE>标签是用来告诉浏览器用哪个html版本解析当前的html页面。其中很多DOCTYPE中都带有DTD声明，DTD就是h...

代码星球 ·2021-02-25

html中charset和content-language的区别

假设下面的这一段html中meta的两行配置。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><metahttp-equiv="Content-Language"conten...

代码星球 ·2021-02-25

替换html元素

html：<divid='divContainer'><divid='divBeReplaced'>被替换的元素</div></div> 1.使用DOM对象添加元素varelemOld=document.getElementById('divBeReplaced...

代码星球 ·2021-02-25

添加html元素

html：<divid='divContainer'></div> 1.使用DOM对象添加元素varel=document.createElement('div');el.innerHTML='用DOM添加的元素';varelContainer=document.getElementB...

代码星球 ·2021-02-25