霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

DIV+CSS自适应布局

自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒。

效果图如下:高度自适应——宽度自适应

...

网站建设中DIV标签使用的一些规则

现在最流行的网站都在使用DIV+CSS的编码去编写,这种编码方便,而且兼容各种浏览器,并且在修改网站的时候也更加便捷。在今天的内容中,小编将介绍下DIV标签使用的一些规则。

DIV是一个块级元素,它后面经常跟随着class或者id这样的元素。主要的差异是class用于元素组,而id用于标识唯一的元素。常规的网站架构通常为:

1.定义一个头部通用。为规范化,通常命名为header。

2.定义主题框架,为规范化,通常命名为content或者wrapper。

...

网页设计WEB前端基础复习

基础框架

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<h1>了不起的盖茨比</h1>
<p>《了不起的盖茨比》为那个奢靡年代的缩影。盖茨比怀揣着对"美国梦"的期翼,投身到那个年代的灯红酒绿之中,却在名利场中看尽世态炎凉,以及浮华背后一切终将逝去的空虚怅惘。1925年《了不起的盖茨比》问世。
</p>
</body>
</html>

了解HTML的代码注释

...

如何才能成为优秀的web前端开发工程师?

很多刚入门的前端攻城师会有一个疑问:如何才能成为一名优秀的前端工程师呢?其实这个问题说大也大,说小也小,展开了说可以写一本书。当然我相信大部分人并不希望去读一本厚厚的书,大道至简,总结下面的几种方法,或许能成为你走向优秀前端的进阶之路。

1、多写。很多问题都是积累得来的,亲手写了才能真正去理解,才会随着自己的不断成长而有进步。别人问我为什么知道那么多 CSS 兼容解决方案,我只能告诉他“实践经验”。我写过很多项目,bug遇见多了,都是一步步调试过来的。

...

纯CSS3实现兔斯基简单害羞表情动画效果

前言

很不巧前天突然就感冒了,都怪自己吃太多饼干导致上火了。整个人都无精打采。本来想多做几个兔斯基表情的,但身体发热很难受。所以就只完成一个简单点的表情耍一耍。

正文

先看一下这个简单到不能再简单的小表情吧:

...

CSS实现右侧固定宽度,左侧宽度自适应

反过来也可以:左侧宽度固定,右侧自适应。不管是左是右,反正就是一边宽度固定,一边宽度自适应。

这种布局比较常见。一般情况下,这种布局中宽度固定的区域是侧边栏,而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧?

要实现这种布局,也算比较简单。我们先给出html结构:

<div id="wrap">
  <div id="sidebar" style="height:240px">固定宽度区</div>
  <div id="content" style="height:340px">自适应区</div>
</div>
<div id="footer">后面的一个DIV,以确保前面的定位不会导致后面的变形</div>

代码中的#wrap的div,是用来包裹我们要定位的这两个区的;他后面还有个#footer,用来测试在前面的定位搞定后会不会导致后面的div错位——如果错位了,那证明我们的定位方法必须改进。

...

手机网站点击链接触发颜色块的问题解决

精彩内容

在开发中有的时候我们在一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。针对这种情况,我们可以为它设置这样的一个属性:

-webkit-tap-highlight-color:rgba(0,0,0,0)。

精彩内容

下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个

...

5个响应式网站建设中的常见问题

响应式网站定义

集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局。

响应式网站建设中的常见问题

屏幕尺寸多,很难做到一次编码,到处运行

目前,主流的大家用来访问网页的设备有:计算机(废话),iPad,Android Pad(例如三星的),智能手机。那么做一个网站,必须到这些设备上去测试和运行。普通的网站作坊很少有人会愿意花这么多的精力去测试一个网站。

...

纯CSS实现多边形 CSS3的clip-path属性介绍

clip-path之所以没有很普及,是因为其浏览器兼容问题。很多IE浏览器对齐属性不是很支持。

IE是完全不支持,尽量使用webkit内核,需要加上内核前缀-webkit-

例子:

看这个效果,对这个DIV进行了裁剪。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>纯CSS实现多边形 CSS3的clip-path属性介绍</title>
<style type="text/css">
<!--
.haorooms-small { background-size: cover; width: 300px; height: 300px; -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%); }
-->
</style>
</head>
<body>
<div class="haorooms-small" style="background-image: url('http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/idtga8h3.png');"> </div>
</body>
</html>

未加相应代码的效果:

...