Imitate the mobile html+css mall:
My interface and news
First look at the picture:
Home page and shopping cart:
Tip: I didn’t add the carousel picture before. This time I add hahah to the carousel picture... If it’s too much trouble, just squeeze it together and take a look~~
Code:
Tips: Because the code is really repetitive, so I will package the code on the code cloud. If necessary, you can directly package it. Of course, the style is very messy. The blogger is working hard. I hope seniors, don’t @@ The following is where the style of my interface css is not pasted
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>我的页面</title>
</head>
<body>
<!-- 顶部栏信息 -->
<div class="my">
<span>我的</span>
<span>设置</span>
</div>
<!-- 头像 id显示 -->
<div class="head">
<div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603376470401&di=a80d6a3db3baa9903abd06aed535327b&imgtype=0&src=http%3A%2F%2F
img.111com.net%2Fattachment%2Fart%2F169262%2F5940a9e9a9.jpg" >
</div>
<div>
<span>locl</span>
<span class="head-number">177*****123</span>
</div>
<div>
<img src="img/right.png" >
</div>
</div>
<!-- 身体显示 -->
<div class="item">
<table>
<tr>
<th class="th1"><img src="img/huiyuan.png" ></th>
<th class="th2">商城会员</th>
<th class="th3"><img src="img/rightto.png" ></th>
</tr>
</table>
</div>
<div class="item">
<table>
<tr>
<th class="th1"><img src="img/shangjia.png" ></th>
<th class="th2">商家服务</th>
<th class="th3"><img src="img/rightto.png" ></th>
</tr>
</table>
</div>
<div class="item">
<table>
<tr>
<th class="th1"><img src="img/yue.png" ></th>
<th class="th2">余额宝</th>
<th class="th3"><img src="img/rightto.png" ></th>
</tr>
</table>
</div>
<div class="item">
<table>
<tr>
<th class="th1"><img src="img/zhangdan.png" ></th>
<th class="th2">账单</th>
<th class="th3"><img src="img/rightto.png" ></th>
</tr>
</table>
</div>
<div class="item">
<table>
<tr>
<th class="th1"><img src="img/kefu.png" ></th>
<th class="th2">我的客服</th>
<th class="th3"><img src="img/rightto.png" ></th>
</tr>
</table>
</div>
</body>
</html>
# apperception：
The end of the training comes to an end. Although this small demo is gradually using a static interface, it is a headache for interaction. However, I feel a little slow in my progress, which may be due to the slowness. I always write code bit by bit, which is really dizzy compared to other friends~ I am becoming more and more proficient in the static style layout of html+css. , This interaction may have to wait until you finish learning js. I’m putting on a small static at the moment
. It’s really very practical for small projects. Recently, there are all styles and things in my head. The front end of Yangyang is still long. The knowledge points in the demo will continue to be written. Sure enough, there are still a lot of words after holding back for a long time! ! !
To be reasonable and to be honest, I think I want to publish a git~ It’s too difficult. Maybe I’m too stupid. I’ve been doing git for a long time.