IFE2015-task1

最新推荐文章于 2019-12-28 16:30:35 发布

Zoe_慕子晴

最新推荐文章于 2019-12-28 16:30:35 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/li_zhuoqing/article/details/53233237

web前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现各种界面设计和布局。包括创建居中元素、无需border-radius的圆角矩形、固定与自适应宽度的布局以及响应式浮动布局。通过实例代码展示了实现这些效果的思路和方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、用HTML实现如下简单界面

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task0001</title>
<link rel="stylesheet" type="text/css" href="ife2015-task0001.css" />
</head>
<body>
<h1>MyGithubAccountName</h1>
<ul>
<li><a href="">Homepage</a></li>
<li><a href="">Blog</a></li>
</ul>
<h2>这是二级标题</h2>
<p>这是我的第一个HTML页面，这里有一个文字段落</p>
<img src="https://github.com/baidu-ife/ife/blob/master/2015_spring/task/task0001/design/banner-bg.jpg?raw=true" width=200px height=200px>

2、用CSS为上面界面增加样式

css代码：

h1{color:blue;}
h2{font-size: 14px;}
p {background-color: black; color:yellow; font-size: 12px; width: 300px;}
img{border-color: red;border-style: solid;;border-width: 2px}

6.1、实现一个背景色为红色、宽度为960px的<DIV>在浏览器中居中

思路：用margin: 0 auto;

background: red; width: 960px; height:100px;margin: 0 auto;

6.2、有的圆角矩形是复杂图案，无法直接用border-radius，请在不使用border-radius的情况下实现一个可复用的高度和宽度都自适应的圆角矩形

思路：用几个小div的左右边框线近似表示圆角，各个小div的margin值依次减小再增大

html代码：

<div class="circle">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="main"></div>
    <div class="div5"></div>
    <div class="div4"></div>
    <div class="div3"></div>
    <div class="div2"></div>
    <div class="div1"></div>
</div>

css代码：

.circle{width: 100px;height: 50px;margin-top: 60px;overflow: hidden;}
.div2, .div3,.div4,.div5{height: 1px;background: lightblue;overflow: hidden;}
.div1{margin: 0px 5px;border-top: solid 1px black;}
.div2{margin: 0px 3px;border-left: solid 1px black;border-right: solid 1px black;}
.top3{margin: 0px 3px;border-left: solid 1px black;border-right: solid 1px black;}
.div4{margin: 0px 1px;border-left: solid 1px black;border-right: solid 1px black;}
.div5{margin: 0px 1px;border-left: solid 1px black;border-right: solid 1px black;}
.main{height: 20px;border-left: solid 1px black;border-right: solid 1px black;background: lightblue;}

如果用border-radius的话代码如下：

.circle2{width: 100px;height: 50px;border: solid 1px black;border-radius: 15px;overflow: hidden;}

6.3、实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化

.div1{background-color: red; width:100px; float: left;}
.div2{background-color: blue; }
.div3{background-color: yellow; width: 100%;}

6.4、实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化

思路：1、浮动+margin 2、父盒子相对定位，子盒子绝对定位

html代码：

<div class="main">
<div class="left">div-A</div>
<div class="middle">div-B</div>
<div class="right">div-C</div>
</div>

css代码：

.main{margin: 0 auto;position: relative;}
.left{background-color: red; width:200px;  position: absolute;left: 0;top: 0;}
.middle{background-color: blue; margin:0 200px;}
.right{background-color: yellow; width: 200px;position:absolute; right: 0;top: 0;}

6.5实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化

html代码：

<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

css代码：

.wrap{background-color: red;overflow:hidden;}
.box{float: left; width: 100px; height: 100px; background-color: blue; margin:10px;}