js+css实现简洁的html代码在线预览效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现简洁的html代码在线预览效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>在线HTML代码预览</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; } body { background-color: #f5f5f5; color: #333; height: 100vh; display: flex; flex-direction: column; } .header { background-color: #2c3e50; color: white; padding: 15px; text-align: center; display: flex; justify-content: center; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 1px; } .container { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .editor-container, .preview-container { flex: 1; overflow: hidden; position: relative; } .editor-header, .preview-header { background-color: #34495e; color: white; padding: 8px 15px; font-size: 0.9rem; display: flex; justify-content: space-between; align-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0