一，首页底部导航栏
html源码：
<!--块元素 底部导航-->
<div class="div_nav">
<!--顶部tab导航,ol无序列表,li定义列表项目-->
<ol>
<!--a锚点或超链接,href目标链接地址,target链接的打开方式-->
<!--href属性:href="javascript:void(0)"暂时不设置目标地址 &&& href="javascript:;"暂时不设置目标地址-->
<!--target属性:_self: 当前窗口(默认) &&& _blank: 新窗口 &&& _parent: 父框架集 &&& _top: 整个窗口 &&& _framename: 指定框架-->
<li id="div_nav">
<a href="#" target="_self">
<img src="images/icon1active.png" />
<p style="color: red;">首页</p>
</a></li>
<li>
<a href="article.html" target="_self">
<img src="images/icon2.png" />
<p>关注</p>
</a>
</li>
<li>
<a href="message.html" target="_self">
<img src="images/icon3.png" />
<p>消息</p>
</a>
</li>
<li>
<a href="me.html" target="_self">
<img src="images/icon4.png" />
<p>我的</p>
</a>
</li>
</ol>
</div>
/**
* 底部导航类选择器
*/
.div_nav {
/*宽度铺满*/
width: 100%;
/*高度固定*/
height: 50px;
/*控件的位置，在布局的底部*/
bottom: 0;
/*位置固定底部，不跟随滚动布局滚动*/
position: fixed;
}
/**
* 横向列表平分
*/
.div_nav ol li {
/*元素宽高,百分比的计算*/
width: calc(100%/4);
/*将默认的列表符号去掉*/
list-style: none;
/*浮动,必须应用在块级元素上,可以把占一行的块级元素分布在一行内,把竖向列表变为横向列表*/
float: left;
/*把行内元素变为块元素*/
display: block;
/* 将默认的内边距去掉 */
padding: 0;
/* 将默认的外边距去掉 */
margin: 0;
}
/**
* 列表长链接a标签样式
*/
.div_nav ol li a {
/* 将链接设为块级元素 */
display: inline-block;
/* 设置宽度 */
width: 100%;
/* 设置高度 */
height: 50px;
/* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
line-height: 50px;
/* 居中对齐文字 */
text-align: center;
/* 设置背景色 */
background: white;
/* 设置文字颜色 */
color: #333333;
/* 去掉下划线 */
text-decoration: none;
/* 在左侧加上分隔线 */
border-top: 1px solid #EEEEEE;
}
/**
* tab 图片样式
*/
.div_nav ol li a img{
width: auto;
height: 24px;
display: block;
margin: 0 auto;
margin-top: 4px;
}
/**
* tab 文字样式 1rem=16px
*/
.div_nav ol li a p{
line-height: 1.4rem;
font-size: 0.8rem;
color: #666666;
}二，文章列表
html源码：
<!--块元素-->
<div class="div_content" id="div_content">
<!-- <div class="div_article" id="div_article" οnclick="displayDate()">
<h4>title</h4>
<div>
<p class="article">content</p>
<img src="images/test2.jpg" />
</div>
</div> -->
</div>
.div_content{
margin-bottom: 50px;
}
/**
* 内容类选择器
* relative 相对定位,相对其正常位置
* absolute 绝对定位,相对于最近的已定位父元素
*/
.div_content .div_article{
padding: 10px;
}
/**
* 文章块级元素
*/
.div_content .div_article div {
display: flex;
}
/**
* flex-shrink: 0 来固定元素不被挤压,解决父控件为flex,子控件宽高不起用的问题
* *******************************************************************************************************
* object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
* object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
* *******************************************************************************************************
* 文章内容-右边图片
* display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：
* none：隐藏元素，不保留元素显示时的空间。
* block：块方式显示元素。
* inline：以内嵌方式显示元素。
* *******************************************************************************************************
* visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：
* inherit：继承父元素的visibility属性设置。
* hidden：隐藏元素，但保留其所占空间。
* visible：显示元素(默认值)。
*/
.div_content div img {
flex-shrink:0;
width: 100px;
height: 58px;
object-fit: cover;
/* display: none; */
}
/**
* 文本显示最多两行
* **************************************************************************
* text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (...) 或显示自定义字符串（不是所有浏览器都支持）。
* clip 剪切文本
* ellipsis 显示省略符号 ... 来代表被修剪的文本
* string 使用给定的字符串来代表被修剪的文本
* initial 设置为属性默认值
* inherit 从父元素继承该属性值
* 需要配合以下两个属性使用：
* white-space: nowrap;
* overflow: hidden;
* **************************************************************************
* white-space属性指定元素内的空白怎样处理。
* normal 默认。空白会被浏览器忽略。
* pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
* nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
* pre-wrap 保留空白符序列，但是正常地进行换行。
* pre-line 合并空白符序列，但是保留换行符。
* inherit 规定应该从父元素继承 white-space 属性的值。
* **************************************************************************
* overflow属性规定当内容溢出元素框时发生的事情。
* visible,默认，空白不会被修剪，会被呈现在元素框之外
* hidden,内容会被修剪，并且剩余内容是不可见的
* scroll,内容会被修剪，浏览器会显示滚动条以便查看其余内容
* auto,如果内容被修剪，浏览器会显示滚动条以便查看其余内容
* inherit,规定应该从父元素继承overflow属性
* **************************************************************************
* display: -webkit-box;父元素设置该属性后，作用与display:flex类似，子元素可在一行显示，且实现自适应。
* 常用属性3个
* box-orient: horizontal | vertical | inherit; 该属性定义父元素的子元素是如何排列的。
* box-pack: start | end | center | justify; 该属性定义父元素的子元素是如何排列的
* box-align: start | end | center | baseline | stretch; 也是沿着box-align方向的
* **************************************************************************
* -webkit-line-clamp属性用于限制块容器可能包含的行数
* *****************************************************************************
* margin的值为auto的具体含义:
* auto意为自动填充。以margin:0,auto;为例，程序会自动计算剩余左右两部分的空白长度，把其等分再作为div左右的外边距,所以可以使用此行代码使得div居中。
*/
.div_content div .article {
max-height: 50px;
/** 超出的文本隐藏**/
overflow: hidden;
/** 溢出用省略号显示**/
text-overflow: ellipsis;
/** 将对象作为弹性伸缩盒子模型显示**/
display: -webkit-box;
/** 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。**/
-webkit-line-clamp: 3;
/**从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)**/
-webkit-box-orient: vertical;
/** 文子颜色 **/
color: #666666;
/** 文子大小 **/
font-size: 0.92rem;
/** 文子字符间距 **/
letter-spacing: 0.1rem;
/** 文子行间距 **/
line-height: 1rem;
/** 距离顶部间隔 **/
margin-top: 0.3rem;
margin-right: 0.8rempx;
margin-right: auto;
}
window.onload = function() {
// document.getElementById("div_nav").addEventListener("click", displayDate);
//创建文章列表
var list = [];
for (var i = 0; i < dataArray.length; i++) {
var tmp =
"<div class=\"div_article\" id=\"div_article\" onclick=\"displayDate(" + i + ")\" >" +
"<h4>" + dataArray[i].title + "</h4>" +
"<div>" +
"<p class=\"article\">" + dataArray[i].content + "</p>" +
"<img src=\"images/test2.jpg\" />" +
"</div>" +
"</div>";
list.push(tmp);
}
var ss = list.join('');
document.getElementById("div_content").innerHTML = ss;
//循环绑定点击事件
// let dd = document.getElementsByClassName('div_article');
// for (var i = 0; i < dd.length; i++) {
// var ss = dd[i];
// ss.index = i;
// ss.onclick = function() {
// alert('第' + (this.index + 1) + '个');
// }
// }
}
//数据源
var dataArray = [{
title: "aa",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
},
{
title: "bb",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
},
{
title: "cc",
content: "离夏天越来越近了，去年的衣服要么扔了，要么只剩下几套可以穿的。剩下的那几套也不是特别的好，所以挺多的人，包括我自己也想拥有一些新衣服。我自己就看了一下那些衣服，我买衣服我也不想到处每家店都去看一下，我就去了去年自己买的那里去看。发现同款衣服在快到冬季的时候很便宜，几十元就能买到。五一呢，就是100多，而现在呢是200多。"
}
];
//列表点击事件
function displayDate(position) {
alert(dataArray[position].title)
}
三， 箭头栏目跳转
html源码：
<ol class="ol_info">
<li>
<span>我的文章</span>
<img src="images/icon_create_dialog_rightarrow_night.png" />
</li>
<li>
<span>浏览历史</span>
<img src="images/icon_create_dialog_rightarrow_night.png" />
</li>
<li οnclick="toSettingPage()">
<span>设置</span>
<img src="images/icon_create_dialog_rightarrow_night.png" />
</li>
</ol>
.ol_info {
width: 100%;
display: inline-block;
margin-top: 20px;
}
/*
* list-style: none;去除列表默认样式
*/
.ol_info li {
padding: 15px;
list-style: none;
display: flex;
border: 1px gainsboro;
border-bottom-style: solid;
}
/*
* line-height: 1rem;设置固定行高使得文本居中
*/
.ol_info span {
width: 100%;
line-height: 1rem;
}
/*
* flex-shrink:0;是图片不被挤压
*/
.ol_info img {
height: 1rem;
flex-shrink: 0;
}/**
* 跳转设置页面
*/
function toSettingPage(){
window.location.href='./setting.html';
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
