使用渡一的前端入门课程进行学习,下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台:sublime。
学习视频:渡一前端入门课。
参照内容:菜鸟教程。
首先使用 white-space:nowrap
清除换行功能。
其次使用overflow: hidden
清除溢出部分。
最后使用text-overflow:ellipsis
使溢出部分用 “…” 展示。
尝试以下代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.ss{
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
p{
width: 300px;
}
</style>
</head>
<body>
<p class="ss">
撒大大阿达阿达我去看望读取文件递交东京dadasdad
</p>
<p>
撒大大阿达阿达我去看望读取文件递交东京dadasdad
</p>
</body>
</html>
在处理多行文本溢出时,因为较为复杂,一般由后端工程师按感觉在一定文字后面用 “…” 展示,是手动的。
CSS 背景属性用于定义HTML元素的背景。
比较常用的有:
背景颜色:background-color、
背景图片:background-image、
背景平铺方式:background-repeat、
背景是否固定:background-attachment、
背景定位:background-position。
尝试下列代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-image:url('https://static.runoob.com/images/mix/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复,设置 position 实例。</p>
<p>背景图片只显示一次,并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
在网速较差时,浏览网页时经常会遇到只展示 html 不展示 css 的情况。为了实现只展示 html 时能看到文字形式的超链接,而展示css时能看到图片形式的超链接看不到文字形式的超链接,可以采用下面的方法。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 90px;
border: 1px solid black;
background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
background-size: 100% 100%;
text-indent: 200px;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
利用padding可以展示背景图片和背景颜色但不能展示内容的原理,使容器的高度为零,padding-top为所需高度,这样文字内容会被挤出到容器外,再使用overflow: hidden使得溢出部分隐藏即可。
尝试下列代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
display: inline-block;
text-decoration: none;
color: #424242;
width: 190px;
height: 0px;
padding-top: 90px;
border: 1px solid black;
background-image: url(O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png);
background-size: 100% 100%;
overflow: hidden;
}
</style>
</head>
<body>
<a href="http://www.taobao.com" target="_blank">淘宝网</a>
</body>
</html>
行级元素只能嵌套行级元素,块级元素可以嵌套任何元素。但是p标签不能嵌套div。
a标签不能嵌套a标签。
使用margin : auto
使得容器相对于展示界面水平居中。
使用position: absolute
、float: left/right
之后,会默认使用display: inline-block;
,即消除行属性。
如果一个容器内有内容,则容器外的文本与容器内的内容顶对齐。
在body中修改line-height
时,如果使用相对数字,则后续的子元素会继承这个相对数字。而如果使用百分比,则会继承百分比计算后的结果。如font-size:14px ; line-height: 1.5
,则后续子元素在设置font-size
后,会继承line-height: 1.5
。但如果设置font-size:14px ; line-height: 150%
,则会继承line-height: 21px
。
在index中使用@import url("reset.css");
导入重置css。
在index中可以强调如下规则
@charset 设置样式表的编码
@import 导入其他样式文件
@meida 媒体查询
@font-face; 自定义字体
通常情况下 h1 标签是主标签,只能出现一次。 h2 是副标签,表示副标题。h3 经常用于板块标题。
盒模型可以分为标准盒模型,IE盒模型(怪异盒模型)。
其中 标准盒模型的总高度=border+width+padding。
怪异盒模型的总高度=width
width: calc(100% - 190px); 可以使用calc函数计算宽度,记得带空格。
跟着课程手敲了一遍静态界面,感觉收获特别特比特别多。现在把代码贴在这里,以后还能回顾一下。
通过html与css完成了淘宝的静态界面,原界面有许多动态效果需要js,尚未学习,所以只实现静态界面的功能。(感觉内容量还是很大的,有很多细节)
这里只粘贴一下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝网 - 淘!我喜欢</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="favicon.ico">
<!-- 放置头的logo -->
<base target="_blank">
<!-- 设置基础路径 -->
</head>
<body>
<!-- 头部信息 -->
<div id="headMessage" class="clearfix layer">
<ul class="fl">
<li>
<span >中国大陆</span>
<span class="iconfont arrow"></span>
</li>
<li class="mr7">
<a href="" class="login mr7">亲,请登录</a>
<a href="">免费注册</a>
</li>
<li><a href="">手机逛淘宝</a></li>
</ul>
<ul class="fr">
<li>
<a href="">我的淘宝</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont "></span>
</li>
<li>
<a href="">
<span class="iconfont mr5 store">󰅄</span>收藏夹
</a>
<span class="iconfont arrow"></span>
</li>
<li><a href="">商品分类</a></li>
<li class="line">|</li>
<li>
<a href="">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont c4 mr5" ></span>
<a href="">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<!-- 头部广告 -->
<div id="headAd">
<div class="layer clearfix">
<a href=""><img src="images/go.png" ></a>
<ul class="fr">
<li class="item1">
<a href="#" class="fr">
<img src="images/adimg_01.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item2">
<a href="#" class="fr">
<img src="images/adimg_02.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item3">
<a href="#" class="fr">
<img src="images/adimg_03.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item4">
<a href="#" class="fr">
<img src="images/adimg_04.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<li class="item5">
<a href="#" class="fr">
<img src="images/adimg_05.jpg" alt="">
</a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</li>
<!-- <li>
<a href="">
<a href="" class="fr"><img src="images/adimg_01.jpg" ></a>
<h3><a href="">电视会场</a></h3>
<p><a href="">最高降2000</a></p>
</a>
</li> -->
</ul>
</div>
</div>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="clearfix layer">
<!-- <h1><a href="#"><img src="images/logo.png" alt="淘宝网"></a></h1> -->
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="iconfont close"></span>
<span class="c5">手机淘宝</span>
<img src="images/code.png" alt="" >
</div>
<div class="search">
<ul class="searchTab cleafix">
<li class="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchContent clearfix">
<form action="" method="">
<div class="searchBox fl">
<input type="text" >
<div class="placeholder">
<i class="iconfont"></i>
<span>网红裤腰带 9.9包邮</span>
</div>
<span class="iconfont imgSearch"></span>
</div>
<div class="btn fl">
<button type="submit">搜索</button>
</div>
</form>
</div>
<div class="hotKey">
<a href="" class="c5">积木</a>
<a href="">网线</a>
<a href="">爬行垫</a>
<a href="" class="c5">时尚连衣裙</a>
<a href="">男士t血</a>
<a href="" class="c5"> 时尚休闲裤</a>
<a href="">粽子</a>
<a href="">沙发</a>
<a href="">风扇</a>
<a href="">定制窗帘</a>
<a href="">男士内裤</a>
<a href="">凉席三件套</a>