个人简介 - HTML/CSS简单页面实例

用 div + css 控制页面

1.position属性：

absolute（绝对定位）：参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位。

在没有设定TRBL，默认依据父级的做标原始点为原始点。

如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

relative（相对定位）：是相对于前面的容器定位的。其层叠通过z-index属性定义。

相对于其最接近的一个参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位。

当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

fixed（固定定位）

表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化

2.margin属性：元素的外边距

有margin-top，margin-right，margin-bottom，margin-left（上，右，下，左）四个方向

margin *同时设置四个外边距

margin **分别设定上下，左右外边距

margin *** 分别设定上，左右，下外边距

margin ****分别设定上，右，下，左外边距（顺时针方向）

3.border-radius：圆角半径

先编辑好一个div块，在.demo里面添加代码：

<div class="demo"></div>
.demo{width:150px;height:80px;border:2px solid #f36;background:#CCC;
}

border-radius只有一个值，四个角具有相同的圆角设置《上，下两个效果等价》

<pre name="code" class="html">.demo{
border-radius: 10px;
}

.demo{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;
}

效果：

设置两个值，此时top-left等于bottom-right并且他们取第一个值；

top-right等于bottom-left并且他们取第二个值，也就是说元素左上角和右下角相同，右上角和左下角相同

.demo{
border-radius: 10px 20px;
}
.demo{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;
}

效果：

“/”前是指圆角的水平半径，而“/”后是指圆角的垂直半径，他们两都遵循TRBL（上右下左）的顺序原则。代码如下：

.demo{
border-radius: 10px 15px 20px 30px / 20px 30px 15px;
}.demo{border-top-left-radius: 10px 20px;border-top-right-radius: 15px 30px;border-bottom-right-radius: 20px 10px;border-bottom-left-radius: 30px 15px;
}

效果：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="0009.css"><title>界面</title></head>
<body><div class="con"><div class="wra"><div class="head"><div class="head_na"><div class="head_title">不怀旧，正青春</div><div class="head_nav"><ul><li><a href = "#">首页</a></li><li><a href = "#">职业</a></li><li><a href = "#">技术</a></li><li><a href = "#">VIP</a></li></ul></div><div class = "head_img"><img src="data:images/bd.png"></div><div class="head_sop"><form><input type="text"></form></div></div></div><div class="body"></div></div><div class="foot">沉默是害怕的借口，傻笑是委屈的理由。</div></div>
</body>
</html>

CSS样式

*
{margin: 0px;padding: 0px;}body
{background-color: aliceblue;
}.wra
{width: 80%;height: 1000px;background-color: aqua;margin: 0px auto;
}.head
{width: 100%;height: 90px;background-color: azure;margin: 0px auto 0px;
}.head_na
{padding-bottom: 30px;padding-top: 30px;width: 100%;height: 30px;position: relative;/* 相对定位。具体请看下面解析 */
}.head_title
{float: left;font-family: sans-serif;font-size: 30px;color: antiquewhite;
}ul
{margin-left: 40px;float: left;          /* 向左浮动 */list-style-type: none;/* 去掉无序列表前面的点 */padding-top: 6px;padding-bottom: 6px;
}li
{padding-left: 10px; display: inline;  /* 转换为内联标签《在一行显示，没有宽高属性》 */
}a:link,a:visited      /* 初次加载，点击过后 */
{font-weight: bold;color: darkgray;text-align: center;padding: 6px;text-decoration: none;/* 去掉下划线 */
}a:hover,a:active /* 鼠标在超链接上，点击超链接时 */
{color: dimgray;
}.head_img img /* 直接指定img，对其设置样式 */
{border-radius: 30px; /* 四个角具有相同的圆角半径 */display: inline;     width: 26px;height: 26px;box-shadow: 0 1px 1px rgba(0 0 0 0.3); /* [投影方式，向内<inset>] X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 颜色 */float: right;
}.head_sop
{float: right;width: 100px;height: 26px;position: relative;margin-right: 50px;
}form input
{height: 23px;border-radius: 30px;
}.foot
{padding-top: 10px;text-align: center;font-size: 10px;color: darkgray;
}

个人简介 - HTML/CSS简单页面实例相关推荐

HTML+CSS简单应用实例——购物网站的制作（二）注册页面
HTML+CSS简单应用实例--购物网站的制作(二)注册页面接上一篇文章,本片文章是注册页面. 下面是效果图: 分析:上方欢迎注册是DIV,下面是表单,点击登录按钮会出现注册成功提示.下方为脚本,同 ...
HTML+CSS简单应用实例——购物网站的制作（四）
HTML+CSS简单应用实例--购物网站的制作(四) 本页面是第二个商品页面,做了个限时抢购的页面. 下面是效果图: 分析:上方限时抢购和12点准时开抢是两个DIV,下面每个商品是一个单独的DIV,总 ...
HTML+CSS简单应用实例——购物网站的制作（五）
HTML+CSS简单应用实例--购物网站的制作(五) 本页面是第三个商品页面. 下面是效果图: 分析:上方淘淘超市是一个DIV,下面超值套装每个商品是一个DIV,美容护肤是一个大表格.下面是脚本. 具 ...
HTML+CSS简单应用实例——购物网站的制作（七）
HTML+CSS简单应用实例--购物网站的制作(七) 本页面是客服页面. 效果图: 分析:上方是一个DIV,下面是两个表格,表格里有列表. 具体代码: <!DOCTYPE html> &l ...
html、css简单页面练习
作业任务:用html和css对poem进行美化运行代码结果 <!DOCTYPE html><html lang="en"><head>< ...
360wi fi广告html,html+css简单的实现360搜索引擎首页面
今天主要学习了是如何实现的,以及我在写这个页面的时候我所遇到的一些困难. 主要实现是用代码的,不说废话了,其实我是想说我走的坑有哪些. 1.代码的基础不好,元素的一些属性不熟悉,对于HTML和css还 ...
ajax排行页面,ajax简单页面
简单的注册页面运用ajax 主页面无标题文档 //首先引用jquery文件登录页面用户名: 密码: $("#btn").click(function(){ //1.取内容 v ...
前端搭建（HTML+CSS+JS）游戏官网（或其它）页面------实例与代码（示例：游戏官网界面）
前端搭建(HTML+CSS+JS)游戏官网(或其它)页面------实例与代码(示例:游戏官网界面) 注意:网页中的示例图片均出自米哈游–原神官网设计,如侵权,联系博主立马进行删除. 目标:网页实现前 ...
HTML+CSS大作业——简单页面-名侦探柯南动漫(2页) 动漫网页设计制作简单静态HTML网页作品漫画作业成品学生影视网站模板
HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 文章目录 HTML5期末大作业:动漫网站设计--简单页面-名侦探柯南动漫(2页) 一.作品展示二.文件目录三.代码实现四. ...

个人简介 - HTML/CSS简单页面实例

个人简介 - HTML/CSS简单页面实例相关推荐

最新文章

热门文章