今天我来给大家分享一下我编写的个人主页的CSS代码。 首先,我们需要设置一些基本的样式,比如说布局样式、字体样式和颜色样式等。下面是我的基本样式设置代码: body { margin: 0; padd
body { margin: 0; padding: 0; font-family: Arial, sans-serif; } <br> .container { max-width: 1200px; margin: 0 auto; padding: 50px; } <br> h1 { font-size: 36px; font-weight: bold; color: #333; text-align: center; margin-bottom: 50px; } <br> p { font-size: 16px; line-height: 1.5; color: #666; text-align: justify; }
/* 导航栏样式 */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); padding: 10px 20px; } <br> .navbar a { font-size: 18px; color: #333; text-decoration: none; } <br> .navbar a:hover { color: #666; } <br> /* 头像样式 */ .avatar { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto; } <br> .avatar img { width: 100%; height: 100%; object-fit: cover; } <br> /* 底部版权信息样式 */ .footer { text-align: center; padding: 20px 0; font-size: 14px; color: #999; }
/* 基本样式设置 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; } <br> .container { max-width: 1200px; margin: 0 auto; padding: 50px; } <br> h1 { font-size: 36px; font-weight: bold; color: #333; text-align: center; margin-bottom: 50px; } <br> p { font-size: 16px; line-height: 1.5; color: #666; text-align: justify; } <br> /* 具体样式设置 */ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); padding: 10px 20px; } <br> .navbar a { font-size: 18px; color: #333; text-decoration: none; } <br> .navbar a:hover { color: #666; } <br> .avatar { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; margin: 0 auto; } <br> .avatar img { width: 100%; height: 100%; object-fit: cover; } <br> .footer { text-align: center; padding: 20px 0; font-size: 14px; color: #999; }
粉丝
0
关注
0
收藏
0