200字范文 > 前端网页设计内容二《电商平台网站》

前端网页设计内容二《电商平台网站》

时间：2019-09-01 17:40:14

相关推荐

前端网页设计内容二《电商平台网站》

讲重点。展示页面效果。代码编译。

看页面效果：

今天的重点在最后一个页面。

看代码：

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>电商平台网站</title></head><link rel="stylesheet" href="./css/电商平台网站1.css" type="text/css" /></head><body><header id="top"><div class="brand">电商网站</div><form action="" method="get"><input type="search" placeholder="搜索" /></form><a href="注册.html">注册信息</a></header><div class="content"><div class="pic_info"><div class="pic_box"><img src="img/bng/kp1%20(2).jpg" /></div><ul><li>商品名称：XXXXX</li><li>商品价格：XXXXX</li><li>商品数量：XXXXX</li></ul></div></div><div class="content"><div class="pic_info"><div class="pic_box"><img src="img/bng/kp1%20(4).jpg" /></div><ul><li>商品名称：XXXXX</li><li>商品价格：XXXXX</li><li>商品数量：XXXXX</li></ul></div></div><div class="content"><div class="pic_info"><div class="pic_box"><img src="img/bng/kp1%20(3).jpg" /></div><ul><li>商品名称：XXXXX</li><li>商品价格：XXXXX</li><li>商品数量：XXXXX</li></ul></div></div><footer style="text-align: center;"> /3/21版权所有/课时作业三</footer></body></html>

* {font-size: 30px;margin: 0;padding: 0;list-style: none;text-decoration: none;background-color: lavenderblush;text-shadow: 1px 1px 2px red;}#top {width: 100%;height: 50px;display: flex;align-items: center;justify-content: space-around;}.brand {font-size: 22px;}#top input[type=search] {width: 200px;}.content {width: 60%;margin: 10px auto;padding: 5px;border: 1px #AFEEEE solid;border-radius: 0.9375rem;box-shadow: 0px 0px 10px 0px #EEEEEE;}.pic_info img {border-radius: 0.9375rem;width: 60%;border-radius: 10px;box-shadow: 1px 4px 2px black;}/* 布局 */.pic_info {display: flex;align-items: center;}.pic_box {flex: 0.8;}.pic_info ul {flex: 1;}/* 定义字体 */@font-face {/* 自定义字体的名字随便取不需要加引号 */font-family: font;/* 字体所在的路径 */src: url('fzld.TTF');}* {/* 使用自定义字体不需要加引号 */font-family: font;color: cornflowerblue;font-weight: 800;}

前端网页设计内容一/3/14_@Live@And@Learn@#的博客-CSDN博客本项目运用Html Css Javascript./qq_56248592/article/details/123490619?spm=1001..3001.5502

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。