UI展示网站模板通常由HTML、CSS和JavaScript代码组成。以下是一个简单的UI展示网站模板示例,您可以根据需要进行修改和定制:
```html
My Website
About Us
Our company is a leading manufacturer of high-quality products for the home and office.
Contact Us
Please feel free to contact us at any time.
```
```css
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
header {
background-color: #1a1a1a;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 30px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav li {
margin-bottom: 10px;
}
nav a {
color: #1a1a1a;
text-decoration: none;
}
main {
margin-top: 50px;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
h2 {
margin-bottom: 10px;
}
p {
font-size: 18px;
margin-bottom: 30px;
}
footer {
background-color: #1a1a1a;
color: #fff;
padding: 20px;
text-align: center;
}
```
```javascript
// CSS
var body = document.querySelector('body');
var header = document.querySelector('header');
var main = document.querySelector('main');
var section = document.querySelector('section');
varfooter = document.querySelector('footer');
// JavaScript
var app = new Vue({
el: '#app',
data: {
body: {
backgroundColor: '#f2f2f2',
fontfamily: 'Arial', sans-serifserifserif,
},
header: {
backgroundColor: '#1a1a1a',
color: '#fff',
padding: 20px,
},
main: {
margin-top: 50px,
},
section: {
display: flex,
flex-wrap: wrap,
justify-content: space-between,
padding: 20px,
},
footer: {
background-color: '#1a1a1a',
color: '#fff',
padding: 20px,
text-align: center,
},
},
methods: {
beforeCreate() {
body.style.backgroundImage = 'url(' body.style.backgroundImage ')';
header.style.backgroundImage = 'url(' header.style.backgroundImage ')';
main.style.backgroundImage = 'url(' main.style.backgroundImage ')';
section.style.backgroundImage = 'url(' section.style.backgroundImage ')';
footer.style.backgroundImage = 'url(' footer.style.backgroundImage ')';
},
},
});
```
这是一个简单的HTML和CSS模板,它可以用于构建具有标题、导航、主体和底部信息的展示网站。您可以根据需要进行修改和定制。
